openproject-primer_view_components 0.70.4 → 0.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +14 -0
  3. data/app/assets/javascripts/components/primer/alpha/segmented_control.d.ts +2 -2
  4. data/app/assets/javascripts/components/primer/open_project/filterable_tree_view.d.ts +29 -0
  5. data/app/assets/javascripts/components/primer/open_project/tree_view/tree_view.d.ts +11 -1
  6. data/app/assets/javascripts/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts +5 -1
  7. data/app/assets/javascripts/components/primer/primer.d.ts +1 -0
  8. data/app/assets/javascripts/primer_view_components.js +1 -1
  9. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  10. data/app/assets/styles/primer_view_components.css +1 -1
  11. data/app/assets/styles/primer_view_components.css.map +1 -1
  12. data/app/components/primer/alpha/action_menu/sub_menu_item.rb +4 -0
  13. data/app/components/primer/alpha/segmented_control.d.ts +2 -2
  14. data/app/components/primer/alpha/segmented_control.js +12 -0
  15. data/app/components/primer/alpha/segmented_control.ts +16 -1
  16. data/app/components/primer/alpha/stack.css +1 -1
  17. data/app/components/primer/alpha/stack.css.json +5 -1
  18. data/app/components/primer/alpha/stack.css.map +1 -1
  19. data/app/components/primer/alpha/stack.pcss +13 -0
  20. data/app/components/primer/alpha/stack.rb +2 -1
  21. data/app/components/primer/open_project/filterable_tree_view/sub_tree.rb +39 -0
  22. data/app/components/primer/open_project/filterable_tree_view.d.ts +29 -0
  23. data/app/components/primer/open_project/filterable_tree_view.html.erb +28 -0
  24. data/app/components/primer/open_project/filterable_tree_view.js +409 -0
  25. data/app/components/primer/open_project/filterable_tree_view.rb +254 -0
  26. data/app/components/primer/open_project/filterable_tree_view.ts +492 -0
  27. data/app/components/primer/open_project/page_header.css +1 -1
  28. data/app/components/primer/open_project/page_header.css.json +1 -1
  29. data/app/components/primer/open_project/page_header.css.map +1 -1
  30. data/app/components/primer/open_project/page_header.pcss +4 -4
  31. data/app/components/primer/open_project/page_header.rb +6 -2
  32. data/app/components/primer/open_project/tree_view/node.rb +19 -3
  33. data/app/components/primer/open_project/tree_view/sub_tree_node.rb +14 -4
  34. data/app/components/primer/open_project/tree_view/tree_view.d.ts +11 -1
  35. data/app/components/primer/open_project/tree_view/tree_view.js +120 -20
  36. data/app/components/primer/open_project/tree_view/tree_view.ts +137 -18
  37. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts +5 -1
  38. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.js +27 -4
  39. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.ts +36 -5
  40. data/app/components/primer/open_project/tree_view.css +1 -1
  41. data/app/components/primer/open_project/tree_view.css.json +9 -0
  42. data/app/components/primer/open_project/tree_view.css.map +1 -1
  43. data/app/components/primer/open_project/tree_view.html.erb +4 -0
  44. data/app/components/primer/open_project/tree_view.pcss +48 -0
  45. data/app/components/primer/open_project/tree_view.rb +6 -1
  46. data/app/components/primer/primer.d.ts +1 -0
  47. data/app/components/primer/primer.js +1 -0
  48. data/app/components/primer/primer.ts +1 -0
  49. data/app/lib/primer/forms/base_component.rb +1 -1
  50. data/app/lib/primer/forms/dsl/text_field_input.rb +2 -0
  51. data/config/locales/en.yml +20 -0
  52. data/lib/primer/view_components/version.rb +2 -2
  53. data/previews/primer/alpha/action_menu_preview/sub_menus.html.erb +1 -0
  54. data/previews/primer/open_project/filterable_tree_view_preview/_custom_select_js.html.erb +62 -0
  55. data/previews/primer/open_project/filterable_tree_view_preview/custom_checkbox_text.html.erb +26 -0
  56. data/previews/primer/open_project/filterable_tree_view_preview/custom_no_results_text.html.erb +28 -0
  57. data/previews/primer/open_project/filterable_tree_view_preview/custom_segmented_control.html.erb +31 -0
  58. data/previews/primer/open_project/filterable_tree_view_preview/default.html.erb +26 -0
  59. data/previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb +32 -0
  60. data/previews/primer/open_project/filterable_tree_view_preview/playground.html.erb +26 -0
  61. data/previews/primer/open_project/filterable_tree_view_preview.rb +125 -0
  62. data/previews/primer/open_project/tree_view_preview/buttons.html.erb +4 -4
  63. data/previews/primer/open_project/tree_view_preview/default.html.erb +4 -4
  64. data/previews/primer/open_project/tree_view_preview/leaf_node_playground.html.erb +1 -1
  65. data/previews/primer/open_project/tree_view_preview/links.html.erb +4 -4
  66. data/previews/primer/open_project/tree_view_preview.rb +18 -8
  67. data/static/arguments.json +89 -3
  68. data/static/audited_at.json +2 -0
  69. data/static/classes.json +3 -0
  70. data/static/constants.json +40 -1
  71. data/static/info_arch.json +220 -3
  72. data/static/previews.json +86 -0
  73. data/static/statuses.json +2 -0
  74. metadata +18 -2
data/app/components/primer/alpha/action_menu/sub_menu_item.rb CHANGED
@@ -36,6 +36,10 @@ module Primer
36
36
  @sub_menu.with_item(form_arguments: @form_arguments, **system_arguments, &block)
37
37
  end
38
38
 
39
+ def with_divider(**system_arguments, &block)
40
+ @sub_menu.with_divider(form_arguments: @form_arguments, **system_arguments, &block)
41
+ end
42
+
39
43
  def with_avatar_item(**system_arguments, &block)
40
44
  @sub_menu.with_avatar_item(form_arguments: @form_arguments, **system_arguments, &block)
41
45
  end
data/app/components/primer/alpha/segmented_control.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- declare class SegmentedControlElement extends HTMLElement {
1
+ export declare class SegmentedControlElement extends HTMLElement {
2
2
  #private;
3
3
  items: HTMLElement[];
4
4
  connectedCallback(): void;
5
5
  select(event: Event): void;
6
+ get current(): HTMLElement | null;
6
7
  }
7
8
  declare global {
8
9
  interface Window {
9
10
  SegmentedControlElement: typeof SegmentedControlElement;
10
11
  }
11
12
  }
12
- export {};
data/app/components/primer/alpha/segmented_control.js CHANGED
@@ -27,6 +27,17 @@ let SegmentedControlElement = class SegmentedControlElement extends HTMLElement
27
27
  }
28
28
  button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
29
29
  button.setAttribute('aria-current', 'true');
30
+ this.dispatchEvent(new CustomEvent('itemActivated', {
31
+ bubbles: true,
32
+ detail: {
33
+ item: button,
34
+ checked: false,
35
+ value: button.querySelector('.Button-label')?.textContent,
36
+ },
37
+ }));
38
+ }
39
+ get current() {
40
+ return this.querySelector('[aria-current=true]');
30
41
  }
31
42
  };
32
43
  _SegmentedControlElement_instances = new WeakSet();
@@ -41,6 +52,7 @@ __decorate([
41
52
  SegmentedControlElement = __decorate([
42
53
  controller
43
54
  ], SegmentedControlElement);
55
+ export { SegmentedControlElement };
44
56
  if (!window.customElements.get('segmented-control')) {
45
57
  window.SegmentedControlElement = SegmentedControlElement;
46
58
  window.customElements.define('segmented-control', SegmentedControlElement);
data/app/components/primer/alpha/segmented_control.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import {controller, targets} from '@github/catalyst'
2
2
 
3
3
  @controller
4
- class SegmentedControlElement extends HTMLElement {
4
+ export class SegmentedControlElement extends HTMLElement {
5
5
  @targets items: HTMLElement[]
6
6
 
7
7
  connectedCallback() {
@@ -17,6 +17,21 @@ class SegmentedControlElement extends HTMLElement {
17
17
 
18
18
  button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
19
19
  button.setAttribute('aria-current', 'true')
20
+
21
+ this.dispatchEvent(
22
+ new CustomEvent('itemActivated', {
23
+ bubbles: true,
24
+ detail: {
25
+ item: button,
26
+ checked: false,
27
+ value: button.querySelector('.Button-label')?.textContent,
28
+ },
29
+ }),
30
+ )
31
+ }
32
+
33
+ get current(): HTMLElement | null {
34
+ return this.querySelector('[aria-current=true]')
20
35
  }
21
36
 
22
37
  // Updates the button labels to have a data-content attribute with the text
data/app/components/primer/alpha/stack.css CHANGED
@@ -1 +1 @@
1
- .Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}
1
+ .Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-narrow=reverse],.Stack[data-wrap=reverse]{flex-wrap:wrap-reverse}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-regular=reverse]{flex-wrap:wrap-reverse}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-wide=reverse]{flex-wrap:wrap-reverse}}
data/app/components/primer/alpha/stack.css.json CHANGED
@@ -44,6 +44,8 @@
44
44
  ".Stack[data-wrap=wrap]",
45
45
  ".Stack[data-wrap-narrow=nowrap]",
46
46
  ".Stack[data-wrap=nowrap]",
47
+ ".Stack[data-wrap-narrow=reverse]",
48
+ ".Stack[data-wrap=reverse]",
47
49
  ".Stack[data-padding-regular=none]",
48
50
  ".Stack[data-padding-regular=condensed]",
49
51
  ".Stack[data-padding-regular=normal]",
@@ -65,6 +67,7 @@
65
67
  ".Stack[data-justify-regular=space-evenly]",
66
68
  ".Stack[data-wrap-regular=wrap]",
67
69
  ".Stack[data-wrap-regular=nowrap]",
70
+ ".Stack[data-wrap-regular=reverse]",
68
71
  ".Stack[data-padding-wide=none]",
69
72
  ".Stack[data-padding-wide=condensed]",
70
73
  ".Stack[data-padding-wide=normal]",
@@ -85,6 +88,7 @@
85
88
  ".Stack[data-justify-wide=space-between]",
86
89
  ".Stack[data-justify-wide=space-evenly]",
87
90
  ".Stack[data-wrap-wide=wrap]",
88
- ".Stack[data-wrap-wide=nowrap]"
91
+ ".Stack[data-wrap-wide=nowrap]",
92
+ ".Stack[data-wrap-wide=reverse]"
89
93
  ]
90
94
  }
data/app/components/primer/alpha/stack.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["stack.pcss"],"names":[],"mappings":"AAAA,OAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDAmSF,CA/RE,2DAEE,SACF,CAEA,qEAGE,0CACF,CAEA,+DAGE,wCACF,CAEA,mEAGE,0CACF,CAEA,2EAEE,aACF,CAEA,uEAEE,gBACF,CAEA,mDAEE,mCACF,CAEA,6DAEE,6CACF,CAEA,uDAEE,wCACF,CAEA,2DAEE,4CACF,CAEA,yDAEE,sBACF,CAEA,2DAEE,kBACF,CAEA,qDAEE,oBACF,CAEA,+DAEE,oBACF,CAEA,6DAEE,0BACF,CAEA,+DAEE,sBACF,CAEA,yDAEE,wBACF,CAEA,6EAEE,6BACF,CAEA,2EAEE,4BACF,CAEA,qDAEE,cACF,CAEA,yDAEE,gBACF,CAGA,yBACE,kCACE,SACF,CAEA,uCAEE,0CACF,CAEA,oCAEE,wCACF,CAEA,sCAEE,0CACF,CAEA,0CACE,aACF,CAEA,wCACE,gBACF,CAEA,8BACE,mCACF,CAEA,mCACE,6CACF,CAEA,gCACE,wCACF,CAEA,kCACE,4CACF,CAEA,iCACE,sBACF,CAEA,kCACE,kBACF,CAEA,+BACE,oBACF,CAEA,oCACE,oBACF,CAEA,mCACE,0BACF,CAEA,oCACE,sBACF,CAEA,iCACE,wBACF,CAEA,2CACE,6BACF,CAEA,0CACE,4BACF,CAEA,+BACE,cACF,CAEA,iCACE,gBACF,CACF,CAGA,2BACE,+BACE,SACF,CAEA,oCAEE,0CACF,CAEA,iCAEE,wCACF,CAEA,mCAEE,0CACF,CAEA,uCACE,aACF,CAEA,qCACE,gBACF,CAEA,2BACE,mCACF,CAEA,gCACE,6CACF,CAEA,6BACE,wCACF,CAEA,+BACE,4CACF,CAEA,8BACE,sBACF,CAEA,+BACE,kBACF,CAEA,4BACE,oBACF,CAEA,iCACE,oBACF,CAEA,gCACE,0BACF,CAEA,iCACE,sBACF,CAEA,8BACE,wBACF,CAEA,wCACE,6BACF,CAEA,uCACE,4BACF,CAEA,4BACE,cACF,CAEA,8BACE,gBACF,CACF","file":"stack.css","sourcesContent":[".Stack {\n display: flex;\n flex-flow: column;\n align-items: stretch;\n align-content: flex-start;\n gap: var(--stack-gap, var(--stack-gap-normal, 1rem));\n\n /* non-responsive values */\n\n &[data-padding='none'],\n &[data-padding-narrow='none'] {\n padding: 0;\n }\n\n &[data-padding='condensed'],\n &[data-padding-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding='normal'],\n &[data-padding-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding='spacious'],\n &[data-padding-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction='horizontal'],\n &[data-direction-narrow='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction='vertical'],\n &[data-direction-narrow='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap='none'],\n &[data-gap-narrow='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap='condensed'],\n &[data-gap-narrow='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap='normal'],\n &[data-gap-narrow='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap='spacious'],\n &[data-gap-narrow='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align='start'],\n &[data-align-narrow='start'] {\n align-items: flex-start;\n }\n\n &[data-align='center'],\n &[data-align-narrow='center'] {\n align-items: center;\n }\n\n &[data-align='end'],\n &[data-align-narrow='end'] {\n align-items: flex-end;\n }\n\n &[data-align='baseline'],\n &[data-align-narrow='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify='start'],\n &[data-justify-narrow='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify='center'],\n &[data-justify-narrow='center'] {\n justify-content: center;\n }\n\n &[data-justify='end'],\n &[data-justify-narrow='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify='space-between'],\n &[data-justify-narrow='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify='space-evenly'],\n &[data-justify-narrow='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap='wrap'],\n &[data-wrap-narrow='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap='nowrap'],\n &[data-wrap-narrow='nowrap'] {\n flex-wrap: nowrap;\n }\n\n /* @custom-media --veiwportRange-regular */\n @media (min-width: 48rem) {\n &[data-padding-regular='none'] {\n padding: 0;\n }\n\n &[data-padding-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction-regular='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-regular='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-regular='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap-regular='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap-regular='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap-regular='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align-regular='start'] {\n align-items: flex-start;\n }\n\n &[data-align-regular='center'] {\n align-items: center;\n }\n\n &[data-align-regular='end'] {\n align-items: flex-end;\n }\n\n &[data-align-regular='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-regular='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-regular='center'] {\n justify-content: center;\n }\n\n &[data-justify-regular='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-regular='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-regular='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-regular='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-regular='nowrap'] {\n flex-wrap: nowrap;\n }\n }\n\n /* @custom-media --viewportRange-wide */\n @media (min-width: 87.5rem) {\n &[data-padding-wide='none'] {\n padding: 0;\n }\n\n &[data-padding-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction-wide='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-wide='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-wide='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap-wide='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap-wide='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap-wide='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align-wide='start'] {\n align-items: flex-start;\n }\n\n &[data-align-wide='center'] {\n align-items: center;\n }\n\n &[data-align-wide='end'] {\n align-items: flex-end;\n }\n\n &[data-align-wide='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-wide='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-wide='center'] {\n justify-content: center;\n }\n\n &[data-justify-wide='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-wide='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-wide='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-wide='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-wide='nowrap'] {\n flex-wrap: nowrap;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["stack.pcss"],"names":[],"mappings":"AAAA,OAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDAgTF,CA5SE,2DAEE,SACF,CAEA,qEAGE,0CACF,CAEA,+DAGE,wCACF,CAEA,mEAGE,0CACF,CAEA,2EAEE,aACF,CAEA,uEAEE,gBACF,CAEA,mDAEE,mCACF,CAEA,6DAEE,6CACF,CAEA,uDAEE,wCACF,CAEA,2DAEE,4CACF,CAEA,yDAEE,sBACF,CAEA,2DAEE,kBACF,CAEA,qDAEE,oBACF,CAEA,+DAEE,oBACF,CAEA,6DAEE,0BACF,CAEA,+DAEE,sBACF,CAEA,yDAEE,wBACF,CAEA,6EAEE,6BACF,CAEA,2EAEE,4BACF,CAEA,qDAEE,cACF,CAEA,yDAEE,gBACF,CAEA,2DAEE,sBACF,CAGA,yBACE,kCACE,SACF,CAEA,uCAEE,0CACF,CAEA,oCAEE,wCACF,CAEA,sCAEE,0CACF,CAEA,0CACE,aACF,CAEA,wCACE,gBACF,CAEA,8BACE,mCACF,CAEA,mCACE,6CACF,CAEA,gCACE,wCACF,CAEA,kCACE,4CACF,CAEA,iCACE,sBACF,CAEA,kCACE,kBACF,CAEA,+BACE,oBACF,CAEA,oCACE,oBACF,CAEA,mCACE,0BACF,CAEA,oCACE,sBACF,CAEA,iCACE,wBACF,CAEA,2CACE,6BACF,CAEA,0CACE,4BACF,CAEA,+BACE,cACF,CAEA,iCACE,gBACF,CAEA,kCACE,sBACF,CACF,CAGA,2BACE,+BACE,SACF,CAEA,oCAEE,0CACF,CAEA,iCAEE,wCACF,CAEA,mCAEE,0CACF,CAEA,uCACE,aACF,CAEA,qCACE,gBACF,CAEA,2BACE,mCACF,CAEA,gCACE,6CACF,CAEA,6BACE,wCACF,CAEA,+BACE,4CACF,CAEA,8BACE,sBACF,CAEA,+BACE,kBACF,CAEA,4BACE,oBACF,CAEA,iCACE,oBACF,CAEA,gCACE,0BACF,CAEA,iCACE,sBACF,CAEA,8BACE,wBACF,CAEA,wCACE,6BACF,CAEA,uCACE,4BACF,CAEA,4BACE,cACF,CAEA,8BACE,gBACF,CAEA,+BACE,sBACF,CACF","file":"stack.css","sourcesContent":[".Stack {\n display: flex;\n flex-flow: column;\n align-items: stretch;\n align-content: flex-start;\n gap: var(--stack-gap, var(--stack-gap-normal, 1rem));\n\n /* non-responsive values */\n\n &[data-padding='none'],\n &[data-padding-narrow='none'] {\n padding: 0;\n }\n\n &[data-padding='condensed'],\n &[data-padding-narrow='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding='normal'],\n &[data-padding-narrow='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding='spacious'],\n &[data-padding-narrow='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction='horizontal'],\n &[data-direction-narrow='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction='vertical'],\n &[data-direction-narrow='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap='none'],\n &[data-gap-narrow='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap='condensed'],\n &[data-gap-narrow='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap='normal'],\n &[data-gap-narrow='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap='spacious'],\n &[data-gap-narrow='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align='start'],\n &[data-align-narrow='start'] {\n align-items: flex-start;\n }\n\n &[data-align='center'],\n &[data-align-narrow='center'] {\n align-items: center;\n }\n\n &[data-align='end'],\n &[data-align-narrow='end'] {\n align-items: flex-end;\n }\n\n &[data-align='baseline'],\n &[data-align-narrow='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify='start'],\n &[data-justify-narrow='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify='center'],\n &[data-justify-narrow='center'] {\n justify-content: center;\n }\n\n &[data-justify='end'],\n &[data-justify-narrow='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify='space-between'],\n &[data-justify-narrow='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify='space-evenly'],\n &[data-justify-narrow='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap='wrap'],\n &[data-wrap-narrow='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap='nowrap'],\n &[data-wrap-narrow='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-wrap='reverse'],\n &[data-wrap-narrow='reverse'] {\n flex-wrap: wrap-reverse;\n }\n\n /* @custom-media --veiwportRange-regular */\n @media (min-width: 48rem) {\n &[data-padding-regular='none'] {\n padding: 0;\n }\n\n &[data-padding-regular='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding-regular='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding-regular='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction-regular='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-regular='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-regular='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap-regular='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap-regular='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap-regular='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align-regular='start'] {\n align-items: flex-start;\n }\n\n &[data-align-regular='center'] {\n align-items: center;\n }\n\n &[data-align-regular='end'] {\n align-items: flex-end;\n }\n\n &[data-align-regular='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-regular='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-regular='center'] {\n justify-content: center;\n }\n\n &[data-justify-regular='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-regular='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-regular='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-regular='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-regular='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-wrap-regular='reverse'] {\n flex-wrap: wrap-reverse;\n }\n }\n\n /* @custom-media --viewportRange-wide */\n @media (min-width: 87.5rem) {\n &[data-padding-wide='none'] {\n padding: 0;\n }\n\n &[data-padding-wide='condensed'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-condensed, 8px);\n }\n\n &[data-padding-wide='normal'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-normal, 16px);\n }\n\n &[data-padding-wide='spacious'] {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--stack-padding-spacious, 24px);\n }\n\n &[data-direction-wide='horizontal'] {\n flex-flow: row;\n }\n\n &[data-direction-wide='vertical'] {\n flex-flow: column;\n }\n\n &[data-gap-wide='none'] {\n --stack-gap: var(--stack-gap-none, 0);\n }\n\n &[data-gap-wide='condensed'] {\n --stack-gap: var(--stack-gap-condensed, 0.5rem);\n }\n\n &[data-gap-wide='normal'] {\n --stack-gap: var(--stack-gap-normal, 1rem);\n }\n\n &[data-gap-wide='spacious'] {\n --stack-gap: var(--stack-gap-spacious, 1.5rem);\n }\n\n &[data-align-wide='start'] {\n align-items: flex-start;\n }\n\n &[data-align-wide='center'] {\n align-items: center;\n }\n\n &[data-align-wide='end'] {\n align-items: flex-end;\n }\n\n &[data-align-wide='baseline'] {\n align-items: baseline;\n }\n\n &[data-justify-wide='start'] {\n justify-content: flex-start;\n }\n\n &[data-justify-wide='center'] {\n justify-content: center;\n }\n\n &[data-justify-wide='end'] {\n justify-content: flex-end;\n }\n\n &[data-justify-wide='space-between'] {\n justify-content: space-between;\n }\n\n &[data-justify-wide='space-evenly'] {\n justify-content: space-evenly;\n }\n\n &[data-wrap-wide='wrap'] {\n flex-wrap: wrap;\n }\n\n &[data-wrap-wide='nowrap'] {\n flex-wrap: nowrap;\n }\n\n &[data-wrap-wide='reverse'] {\n flex-wrap: wrap-reverse;\n }\n }\n}\n"]}
data/app/components/primer/alpha/stack.pcss CHANGED
@@ -115,6 +115,11 @@
115
115
  flex-wrap: nowrap;
116
116
  }
117
117
 
118
+ &[data-wrap='reverse'],
119
+ &[data-wrap-narrow='reverse'] {
120
+ flex-wrap: wrap-reverse;
121
+ }
122
+
118
123
  /* @custom-media --veiwportRange-regular */
119
124
  @media (min-width: 48rem) {
120
125
  &[data-padding-regular='none'] {
@@ -203,6 +208,10 @@
203
208
  &[data-wrap-regular='nowrap'] {
204
209
  flex-wrap: nowrap;
205
210
  }
211
+
212
+ &[data-wrap-regular='reverse'] {
213
+ flex-wrap: wrap-reverse;
214
+ }
206
215
  }
207
216
 
208
217
  /* @custom-media --viewportRange-wide */
@@ -293,5 +302,9 @@
293
302
  &[data-wrap-wide='nowrap'] {
294
303
  flex-wrap: nowrap;
295
304
  }
305
+
306
+ &[data-wrap-wide='reverse'] {
307
+ flex-wrap: wrap-reverse;
308
+ }
296
309
  }
297
310
  }
data/app/components/primer/alpha/stack.rb CHANGED
@@ -78,7 +78,8 @@ module Primer
78
78
  OPTIONS = [
79
79
  nil,
80
80
  DEFAULT,
81
- :wrap
81
+ :wrap,
82
+ :reverse
82
83
  ].freeze
83
84
 
84
85
  def initialize(values)
data/app/components/primer/open_project/filterable_tree_view/sub_tree.rb ADDED
@@ -0,0 +1,39 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module OpenProject
5
+ class FilterableTreeView
6
+ # A `FilterableTreeView` sub-tree node.
7
+ #
8
+ # This component is part of the <%= link_to_component(Primer::OpenProject::FilterableTreeView) %> component and
9
+ # should not be used directly.
10
+ class SubTree < Primer::OpenProject::TreeView::SubTree
11
+ def with_sub_tree(**system_arguments, &block)
12
+ super(
13
+ sub_tree_component_klass: self.class,
14
+ **system_arguments,
15
+ select_variant: :multiple,
16
+ select_strategy: :self,
17
+ &block
18
+ )
19
+ end
20
+
21
+ def with_leaf(**system_arguments, &block)
22
+ super(
23
+ **system_arguments,
24
+ select_variant: :multiple,
25
+ &block
26
+ )
27
+ end
28
+
29
+ def with_loading_spinner(**system_arguments)
30
+ raise ArgumentError, "FilteredTreeView does not support asynchronous loading"
31
+ end
32
+
33
+ def with_loading_skeleton(**system_arguments)
34
+ raise ArgumentError, "FilteredTreeView does not support asynchronous loading"
35
+ end
36
+ end
37
+ end
38
+ end
39
+ end
data/app/components/primer/open_project/filterable_tree_view.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { SegmentedControlElement } from '../alpha/segmented_control';
2
+ import { TreeViewElement } from './tree_view/tree_view';
3
+ import { TreeViewSubTreeNodeElement } from './tree_view/tree_view_sub_tree_node_element';
4
+ export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null;
5
+ export declare class FilterableTreeViewElement extends HTMLElement {
6
+ #private;
7
+ filterInput: HTMLInputElement;
8
+ filterModeControlList: HTMLElement;
9
+ treeViewList: HTMLElement;
10
+ noResultsMessage: HTMLElement;
11
+ includeSubItemsCheckBox: HTMLInputElement;
12
+ connectedCallback(): void;
13
+ disconnectedCallback(): void;
14
+ handleEvent(event: Event): void;
15
+ get filterModeControl(): SegmentedControlElement | null;
16
+ get treeView(): TreeViewElement | null;
17
+ set filterFn(newFn: FilterFn);
18
+ get filterFn(): FilterFn;
19
+ defaultFilterFn(node: HTMLElement, query: string, filterMode?: string): Range[] | null;
20
+ get filterMode(): string | null;
21
+ get queryString(): string;
22
+ eachDescendantDepthFirst(node: HTMLElement, level: number, ancestry: TreeViewSubTreeNodeElement[]): Generator<[NodeListOf<HTMLElement>, TreeViewSubTreeNodeElement[]]>;
23
+ eachShallowestCheckedSubTree(root: TreeViewSubTreeNodeElement): Generator<TreeViewSubTreeNodeElement>;
24
+ }
25
+ declare global {
26
+ interface Window {
27
+ FilterableTreeViewElement: typeof FilterableTreeViewElement;
28
+ }
29
+ }
data/app/components/primer/open_project/filterable_tree_view.html.erb ADDED
@@ -0,0 +1,28 @@
1
+ <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
2
+ <%= render(Primer::Alpha::Stack.new) do %>
3
+ <%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
4
+ <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
5
+ <%= render(Primer::Alpha::StackItem.new) do %>
6
+ <%= render(@filter_mode_control) %>
7
+ <% end %>
8
+ <%= render(Primer::Alpha::StackItem.new) do %>
9
+ <%= render(@include_sub_items_check_box) do |input| %>
10
+ <% input.merge_input_arguments!(form: "") %>
11
+ <% end %>
12
+ <% end %>
13
+ <% end %>
14
+ <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
15
+ <%= render(@filter_input) do |input| %>
16
+ <%# exclude from form submissions %>
17
+ <% input.merge_input_arguments!(form: "") %>
18
+ <% end %>
19
+ <% end %>
20
+ <% end %>
21
+ <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
22
+ <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
23
+ <% tree.with_leaf(**@no_results_node_arguments) %>
24
+ <% end %>
25
+ <% end %>
26
+ <%= render(@tree_view) %>
27
+ <% end %>
28
+ <% end %>