playbook_ui 13.0.0.pre.alpha.PLAY966collapsiblenav41129 → 13.0.0.pre.alpha.salesbookmismatchingdate1120

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_kit/dateTime.ts +55 -48
  4. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +14 -16
  5. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +115 -86
  6. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +58 -58
  7. data/app/pb_kits/playbook/pb_nav/_item.tsx +138 -234
  8. data/app/pb_kits/playbook/pb_nav/_mixins.scss +5 -0
  9. data/app/pb_kits/playbook/pb_nav/_nav.scss +0 -38
  10. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -17
  11. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +11 -9
  12. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +59 -50
  13. data/app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +1 -4
  15. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +4 -4
  16. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +10 -4
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +1 -5
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +12 -12
  19. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +1 -13
  20. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  21. data/app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx +1 -4
  22. data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx +1 -4
  23. data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx +1 -4
  24. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -5
  25. data/app/pb_kits/playbook/pb_nav/item.html.erb +12 -19
  26. data/app/pb_kits/playbook/pb_nav/item.rb +14 -55
  27. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -3
  28. data/app/pb_kits/playbook/pb_time/_time.tsx +1 -1
  29. data/dist/playbook-rails.js +5 -5
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +3 -4
  32. data/app/pb_kits/playbook/pb_nav/_collapsible_trail_mixin.scss +0 -14
  33. data/app/pb_kits/playbook/pb_nav/navTypes.ts +0 -25
@@ -8,8 +8,8 @@
8
8
 
9
9
  $selector: ".pb_nav_list";
10
10
 
11
- [class^="pb_nav_list"][class*="_horizontal"] {
12
- .pb_nav_wrapper {
11
+ [class^=pb_nav_list][class*=_horizontal] {
12
+ ul {
13
13
  display: flex;
14
14
  align-items: center;
15
15
  padding: 0;
@@ -17,13 +17,13 @@ $selector: ".pb_nav_list";
17
17
  list-style: none;
18
18
  }
19
19
 
20
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
20
+ [class*=pb_nav_list_kit_item] {
21
21
  transition-property: border-color;
22
22
  transition-duration: 0.15s;
23
23
  transition-timing-function: $bezier;
24
24
  padding: 0;
25
25
 
26
- &[class*="_link"] {
26
+ [class*=_link] {
27
27
  text-decoration: none;
28
28
  display: flex;
29
29
  align-items: center;
@@ -36,18 +36,19 @@ $selector: ".pb_nav_list";
36
36
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
37
37
  color: $text_lt_default;
38
38
 
39
- [class*="_icon_left"] {
39
+ [class*=_icon_left] {
40
40
  font-size: $font_large;
41
41
  margin-right: $space_sm;
42
42
  color: $text_lt_lighter;
43
43
  }
44
44
 
45
- [class*="_text"] {
46
- color: $text_lt_default;
45
+ [class*=_text] {
46
+ font-size: $font_base;
47
47
  font-weight: $bold;
48
+ color: $text_lt_default;
48
49
  }
49
50
 
50
- @media (hover: hover) {
51
+ @media (hover:hover) {
51
52
  &:hover {
52
53
  color: $primary;
53
54
  #{$selector}_item_icon,
@@ -56,85 +57,84 @@ $selector: ".pb_nav_list";
56
57
  }
57
58
  }
58
59
  }
59
- &[class*="_active"] {
60
- border-color: $primary;
61
- [class*="_item_icon"] {
62
- color: $text_lt_default;
63
- }
64
- [class*="_item_text"] {
65
- color: $text_lt_default;
66
- font-weight: $bold;
67
- }
68
- &:hover {
69
- #{$selector}_item_icon,
70
- #{$selector}_item_text {
71
- color: $primary;
72
- }
73
- }
60
+ }
61
+ }
62
+
63
+ [class*=_active] {
64
+ #{$selector}_item_link {
65
+ border-color: $primary;
66
+
67
+ [class*=_item_icon] {
68
+ color: $text_lt_default;
69
+ }
70
+
71
+ [class*=_item_text] {
72
+ color: $text_lt_default;
73
+ font-weight: $bold;
74
74
  }
75
75
  }
76
76
  }
77
77
 
78
78
  // Subtle Variant
79
- &[class*="_subtle"] {
79
+ &[class*=_subtle] {
80
80
  @include subtle;
81
81
  // Horizontal Overrides
82
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
82
+ [class*=pb_nav_list_kit_item] {
83
83
  margin: 0;
84
- [class*="_item_text"] {
85
- font-weight: $regular !important;
84
+ [class*=_item_text]{
85
+ font-weight: $regular;
86
86
  }
87
- &[class*="_active"] {
88
- background-color: $active_light;
89
- &[class*="dark"] {
90
- background-color: rgba($white, $opacity_1);
91
- [class*="_item_text"] {
92
- color: $white !important;
93
- }
94
- }
95
- [class*="_item_text"] {
96
- color: $primary !important;
87
+ }
88
+ [class*=_active] {
89
+ background-color: $active_light;
90
+ &[class*=dark] {
91
+ background-color: rgba($white, $opacity_1);
92
+ }
93
+ [class*=_item_link] {
94
+ [class*=_item_text]{
95
+ color: $primary;
97
96
  }
98
97
  }
99
98
  }
100
99
  }
101
100
 
102
101
  // Bold Variant
103
- &[class*="_bold"] {
102
+ &[class*=_bold] {
104
103
  @include bold;
105
104
  // Horizontal Overrides
106
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
105
+ [class*=pb_nav_list_kit_item] {
107
106
  margin: 0;
108
- [class*="_item_text"] {
107
+ [class*=_item_text]{
109
108
  font-weight: $regular;
110
109
  }
111
110
  }
112
- [class*="_active"] {
113
- [class*="_text"] {
114
- color: $white !important;
111
+ [class*=_active] {
112
+ [class*=_text] {
113
+ color: $white;
115
114
  }
116
115
  }
117
116
  }
118
117
 
119
- &[class*="dark"] {
120
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
121
- border-color: rgba($white, $opacity_3);
122
- &[class*="_active"] {
118
+ &[class*=dark]{
119
+ [class*=pb_nav_list_kit_item]{
120
+ [class*=_link]{
121
+ border-color: rgba($white, $opacity_3);
122
+ }
123
+ &[class*=_active] [class*=_link]{
123
124
  border-color: $active_dark;
124
- [class*="_text"],
125
- [class*="_icon"] {
125
+ [class*=_text],[class*=_icon]{
126
126
  color: $text_dk_default;
127
127
  }
128
128
  }
129
- [class*="_text"],
130
- [class*="_icon"] {
131
- color: $text_dk_lighter;
132
- }
133
- &:hover {
134
- background-color: rgba($white, $opacity_1);
135
- [class*="_icon"],
136
- [class*="_text"] {
137
- color: $white !important;
129
+ [class*=_link] {
130
+ [class*=_text],[class*=_icon]{
131
+ color: $text_dk_lighter;
132
+ }
133
+ &:hover{
134
+ background-color: rgba($white, $opacity_1);
135
+ [class*=_icon],[class*=_text] {
136
+ color: $white;
137
+ }
138
138
  }
139
139
  }
140
140
  }
@@ -1,64 +1,42 @@
1
- import React from "react";
2
- import classnames from "classnames";
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
3
 
4
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
5
- import { globalProps, GlobalProps } from "../utilities/globalProps";
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
- import Icon from "../pb_icon/_icon";
8
- import Image from "../pb_image/_image";
9
- import Collapsible from "../pb_collapsible/_collapsible";
10
- import { NavChildProps } from "./navTypes";
11
- import { Spacing } from "../types";
7
+ import Icon from '../pb_icon/_icon'
8
+ import Image from '../pb_image/_image'
9
+ import Collapsible from '../pb_collapsible/_collapsible'
12
10
 
13
11
  type NavItemProps = {
14
- active?: boolean;
15
- aria?: { [key: string]: string };
16
- fontWeight?: "regular" | "bold" | "bolder";
17
- children?: React.ReactNode[] | React.ReactNode;
18
- className?: string;
19
- collapsible?: boolean;
20
- data?: object;
21
- dark?: boolean;
22
- fontSize?: "normal" | "small";
23
- iconLeft?: string;
24
- iconRight?: string | string[];
25
- onIconRightClick?: () => void;
26
- onIconLeftClick?: () => void;
27
- id?: string;
28
- imageUrl?: string;
29
- link?: string;
30
- onClick?: () => void;
31
- target?: "_blank" | "_self" | "_parent" | "_top";
32
- text: string;
33
- collapsibleTrail?: boolean;
34
- collapsed?: boolean;
35
- orientation?: "vertical" | "horizontal";
36
- variant?: "normal" | "subtle";
37
- margin?: Spacing;
38
- marginBottom?: Spacing;
39
- marginTop?: Spacing;
40
- marginRight?: Spacing;
41
- marginLeft?: Spacing;
42
- marginX?: Spacing;
43
- marginY?: Spacing;
44
- } & GlobalProps;
12
+ active?: boolean,
13
+ aria?: { [key: string]: string },
14
+ fontWeight?: "regular" | "bold" | "bolder",
15
+ children?: React.ReactNode[] | React.ReactNode,
16
+ className?: string,
17
+ collapsible?: boolean,
18
+ data?: object,
19
+ dark?: boolean,
20
+ fontSize?: "normal" | "small",
21
+ iconLeft?: string,
22
+ iconRight?: string | string[],
23
+ onIconRightClick?: () => void,
24
+ onIconLeftClick?: () => void,
25
+ id?: string,
26
+ imageUrl?: string,
27
+ link?: string,
28
+ onClick?: () => void,
29
+ target?: '_blank' | '_self' | '_parent' | '_top',
30
+ text: string,
31
+ collapsibleTrail?: boolean,
32
+ collapsed?: boolean
33
+ } & GlobalProps
45
34
 
46
35
  const NavItem = (props: NavItemProps) => {
47
-
48
- const fontWeightDefault = (orientation: string, variant: string) => {
49
- return orientation === "horizontal" && variant === "subtle"
50
- ? "regular "
51
- : orientation === "horizontal" && variant === "normal"
52
- ? "bold"
53
- : "regular";
54
- };
55
-
56
36
  const {
57
37
  active = false,
58
38
  aria = {},
59
- orientation,
60
- variant,
61
- fontWeight = fontWeightDefault(orientation, variant),
39
+ fontWeight = "regular",
62
40
  children,
63
41
  className,
64
42
  collapsible,
@@ -72,204 +50,129 @@ const NavItem = (props: NavItemProps) => {
72
50
  id,
73
51
  imageUrl,
74
52
  link,
75
- onClick = () => {},
76
- target = "_self",
77
- text = "",
53
+ onClick = () => { },
54
+ target = '_self',
55
+ text = '',
78
56
  collapsibleTrail,
79
- collapsed,
80
- itemSpacing,
81
- margin,
82
- marginBottom,
83
- marginTop,
84
- marginRight,
85
- marginLeft,
86
- marginX,
87
- marginY,
88
- } = props;
89
-
90
- const spacingMarginProps = {
91
- margin,
92
- marginBottom,
93
- marginTop,
94
- marginRight,
95
- marginLeft,
96
- marginX,
97
- marginY,
98
- };
99
-
100
- //separate margin props and padding props in itemSpacing object
101
- const filterItemSpacing = (obj: { [key: string]: string }) => {
102
- const filteredPadding: { [key: string]: string } = {};
103
- const filteredMargin: { [key: string]: string } = {};
104
- for (const key in obj) {
105
- if (key.startsWith('padding')) {
106
- filteredPadding[key] = obj[key];
107
- } else if (key.startsWith('margin')) {
108
- filteredMargin[key] = obj[key];
109
- }
110
- }
111
- return { filteredPadding, filteredMargin };
112
- };
113
-
114
- //deconstruct itemSpacing
115
- const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
116
-
117
- //if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
118
- const finalItemSpacing = {
119
- ...(filteredMargin || {}),
120
- ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
121
- if (value) {
122
- acc[prop] = value;
123
- }
124
- return acc;
125
- }, {}),
126
- };
127
-
128
- //custom for collapsible only, to apply margin to correct div
129
- const filteredProps = { ...props };
130
- delete filteredProps?.margin;
131
- delete filteredProps?.marginX;
132
- delete filteredProps?.marginY;
133
- delete filteredProps?.marginBottom;
134
- delete filteredProps?.marginTop;
135
- delete filteredProps?.marginRight;
136
- delete filteredProps?.marginLeft;
137
-
138
-
139
- const Tag = link ? "a" : "div";
140
- const activeClass = active === true ? "active" : "";
141
- const collapsibleTrailClass =
142
- collapsible && collapsibleTrail ? "collapsible_trail" : "";
143
- const fontSizeClass =
144
- fontSize === "small" ? "font_size_small" : "font_size_normal";
145
- const fontWeightClass =
146
- fontWeight === "bold"
147
- ? "font_bold"
148
- : fontWeight === "bolder"
149
- ? "font_bolder"
150
- : "font_regular";
151
- const ariaProps = buildAriaProps(aria);
152
- const dataProps = buildDataProps(data);
153
-
154
- const tagClasses = classnames(
155
- collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
156
- );
157
-
158
- const classes = classnames(
159
- buildCss("pb_nav_list_kit_item", activeClass),
160
- collapsible
161
- ? buildCss("pb_collapsible_nav_item", activeClass)
162
- : "",
163
- fontSizeClass,
164
- fontWeightClass,
165
- tagClasses,
166
- collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
167
- className
168
- );
169
-
170
- const handleIconClick = (e: any) => {
57
+ collapsed
58
+ } = props
59
+
60
+ const Tag = link ? 'a' : 'div'
61
+ const activeClass = active === true ? 'active' : ''
62
+ const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
63
+ const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
64
+ const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
65
+ const ariaProps = buildAriaProps(aria)
66
+ const dataProps = buildDataProps(data)
67
+ const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
68
+ collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '',
69
+ fontSizeClass,
70
+ fontWeightClass,
71
+ globalProps(props),
72
+ className)
73
+
74
+
75
+ const handleIconClick = (e:any) => {
171
76
  if (onIconLeftClick) {
172
- e.stopPropagation();
173
- onIconLeftClick();
174
- }
175
- };
176
-
177
-
178
- // Map over the children and clone them with itemSpacing prop so nested navItems all get itemSpacing
179
- const childrenWithProps = React.Children.map(children, (child) => {
180
- if (React.isValidElement(child)) {
181
- const childProps: NavChildProps = {
182
- itemSpacing: itemSpacing,
183
- };
184
- return React.cloneElement(child, childProps);
77
+ e.stopPropagation();
78
+ onIconLeftClick()
185
79
  }
186
- return child;
187
- });
80
+ }
188
81
 
189
82
  return (
190
- <>
191
- {collapsible ? (
192
- <>
193
- <Collapsible
194
- className={`collapsible_nav_wrapper_${activeClass}_${collapsibleTrailClass}`}
195
- icon={iconRight && iconRight}
196
- iconSize="xs"
83
+ <li
84
+ {...ariaProps}
85
+ {...dataProps}
86
+ className={classes}
87
+ id={id}
88
+ >
89
+ {
90
+ collapsible ? (
91
+ <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
92
+ iconSize="xs"
197
93
  id={id}
198
94
  collapsed={collapsed}
199
95
  onIconClick={onIconRightClick}
200
96
  onClick={onClick}
201
97
  >
202
- <Collapsible.Main
203
- className={globalProps({ ...finalItemSpacing })}
204
- dark={dark}>
205
- <Tag
206
- {...ariaProps}
207
- {...dataProps}
208
- className={classes}
209
- id={id}
210
- href={link}
211
- target={target}
212
- >
213
- {imageUrl && (
214
- <div
215
- className="pb_nav_list_item_icon_section_collapsible"
216
- key={imageUrl}
217
- onClick={(e) => handleIconClick(e)}
218
- >
219
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
220
- </div>
221
- )}
222
-
223
- {iconLeft && (
224
- <div
225
- className="pb_nav_list_item_icon_section_collapsible"
226
- key={iconLeft}
227
- onClick={(e) => handleIconClick(e)}
228
- >
229
- <Icon
230
- className="pb_nav_list_item_icon_left_collapsible"
231
- fixedWidth
232
- icon={iconLeft}
233
- />
234
- </div>
235
- )}
236
- <span className="pb_nav_list_item_text_collapsible">
237
- {text}
238
- </span>
239
- </Tag>
240
- </Collapsible.Main>
241
- <Collapsible.Content>{childrenWithProps}</Collapsible.Content>
242
- </Collapsible>
243
- </>
244
- ) : (
98
+ <Collapsible.Main dark={dark}>
99
+ <Tag
100
+ className="pb_nav_list_item_link_collapsible"
101
+ href={link}
102
+ target={target}
103
+ >
104
+ {imageUrl &&
105
+ <div
106
+ className="pb_nav_list_item_icon_section_collapsible"
107
+ key={imageUrl}
108
+ onClick={(e)=>handleIconClick(e)}
109
+ >
110
+ <Image
111
+ className="pb_nav_img_wrapper"
112
+ url={imageUrl}
113
+ />
114
+ </div>
115
+ }
116
+
117
+ {iconLeft &&
118
+ <div
119
+ className="pb_nav_list_item_icon_section_collapsible"
120
+ key={iconLeft}
121
+ onClick={(e)=>handleIconClick(e)}
122
+ >
123
+ <Icon
124
+ className="pb_nav_list_item_icon_left_collapsible"
125
+ fixedWidth
126
+ icon={iconLeft}
127
+ />
128
+ </div>
129
+ }
130
+ <span className="pb_nav_list_item_text_collapsible">
131
+ {text}
132
+ </span>
133
+ </Tag>
134
+ </Collapsible.Main>
135
+ <Collapsible.Content>
136
+ {children}
137
+ </Collapsible.Content>
138
+ </Collapsible>
139
+ ) : (
245
140
  <Tag
246
- {...ariaProps}
247
- {...dataProps}
248
- className={classes}
249
- id={id}
141
+ className="pb_nav_list_item_link"
250
142
  href={link}
251
143
  onClick={onClick}
252
144
  target={target}
253
145
  >
254
- {imageUrl && (
255
- <div className="pb_nav_list_item_icon_section" key={imageUrl}>
256
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
146
+ {imageUrl &&
147
+ <div
148
+ className="pb_nav_list_item_icon_section"
149
+ key={imageUrl}
150
+ >
151
+ <Image
152
+ className="pb_nav_img_wrapper"
153
+ url={imageUrl}
154
+ />
257
155
  </div>
258
- )}
259
-
260
- {iconLeft && (
261
- <div className="pb_nav_list_item_icon_section" key={iconLeft}>
156
+ }
157
+
158
+ {iconLeft &&
159
+ <div
160
+ className="pb_nav_list_item_icon_section"
161
+ key={iconLeft}
162
+ >
262
163
  <Icon
263
164
  className="pb_nav_list_item_icon_left"
264
165
  fixedWidth
265
166
  icon={iconLeft}
266
167
  />
267
168
  </div>
268
- )}
269
-
270
- <span className="pb_nav_list_item_text">{text || children}</span>
271
-
272
- {iconRight && (
169
+ }
170
+
171
+ <span className="pb_nav_list_item_text">
172
+ {text || children}
173
+ </span>
174
+
175
+ {iconRight &&
273
176
  <div
274
177
  className="pb_nav_list_item_icon_section"
275
178
  key={iconRight as string}
@@ -280,11 +183,12 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
280
183
  icon={iconRight as string}
281
184
  />
282
185
  </div>
283
- )}
186
+ }
284
187
  </Tag>
285
- )}
286
- </>
287
- );
288
- };
188
+ )
189
+ }
190
+ </li>
191
+ )
192
+ }
289
193
 
290
- export default NavItem;
194
+ export default NavItem
@@ -0,0 +1,5 @@
1
+ @mixin collapsible_trail_class {
2
+ .pb_collapsible_content_kit {
3
+ border-color: $border_light;
4
+ }
5
+ }
@@ -5,41 +5,3 @@
5
5
  @import "./vertical_nav";
6
6
  @import "./horizontal_nav";
7
7
  @import "./collapsible_nav";
8
-
9
- [class^="pb_nav_list"] {
10
- //classes for fontSize and fontWeight props
11
- .font_size_small {
12
- .pb_nav_list_item_text,
13
- .pb_nav_list_item_text_collapsible {
14
- font-size: $font_small;
15
- }
16
- }
17
-
18
- .font_size_normal {
19
- .pb_nav_list_item_text,
20
- .pb_nav_list_item_text_collapsible {
21
- font-size: $font_normal;
22
- }
23
- }
24
-
25
- .font_bolder {
26
- .pb_nav_list_item_text,
27
- .pb_nav_list_item_text_collapsible {
28
- font-weight: $bolder !important;
29
- }
30
- }
31
-
32
- .font_bold {
33
- .pb_nav_list_item_text,
34
- .pb_nav_list_item_text_collapsible {
35
- font-weight: $bold !important;
36
- }
37
- }
38
-
39
- .font_regular {
40
- .pb_nav_list_item_text,
41
- .pb_nav_list_item_text_collapsible {
42
- font-weight: $regular;
43
- }
44
- }
45
- }