@abgov/react-components 3.4.0-alpha.2 → 3.4.0-alpha.20

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 (10) hide show
  1. package/README.md +48 -6
  2. package/index.d.ts +2 -1
  3. package/lib/badge/badge.d.ts +0 -1
  4. package/lib/flex/row.d.ts +0 -1
  5. package/lib/input/input.d.ts +4 -1
  6. package/lib/service-level-header/service-level-header.d.ts +2 -0
  7. package/lib/spinner/spinner.d.ts +10 -8
  8. package/package.json +2 -2
  9. package/react-components.esm.js +64 -59
  10. package/react-components.umd.js +66 -63
package/README.md CHANGED
@@ -2,16 +2,58 @@
2
2
 
3
3
  This library contains react components from the Government of Alberta.
4
4
 
5
- ## Installation
5
+ Create react app
6
+ ```bash
7
+ npm init vite@latest
8
+ ```
6
9
 
10
+ Add Dependencies
7
11
  ```bash
8
- npm add --save @abgov/react-components
12
+ npm i
13
+ npm i @abgov/react-components@3.4.0-alpha.7
14
+ npm i @abgov/styles
9
15
  ```
10
16
 
11
- ## Usage
17
+ Link ionicons in app/index.html
18
+ ```html
19
+ <!DOCTYPE html>
20
+ <html lang="en">
21
+ <head>
22
+ <meta charset="UTF-8" />
23
+ <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
24
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
25
+ <title>Vite App</title>
26
+ <!-- Ionicons -->
27
+ <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
28
+ <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
29
+ <!-- -->
30
+ </head>
31
+ <body>
32
+ <div id="root"></div>
33
+ <script type="module" src="/src/main.tsx"></script>
34
+ </body>
35
+ </html>
36
+
37
+ ```
12
38
 
13
- Insert the following into your base index.html file's `<head>` section:
39
+ ```typescript
40
+ // App.tsx
41
+ import './App.css'
14
42
 
15
- ```html
16
- <script src="https://unpkg.com/ionicons@5.5.3/dist/ionicons.js"></script>
43
+ import { GoABadge } from '@abgov/react-components';
44
+
45
+ function App() {
46
+ return (
47
+ <GoABadge type="information" content="Some info" icon={true} />
48
+ )
49
+ }
50
+
51
+ export default App
52
+
53
+
54
+ ```
55
+
56
+ Import the styles in the `src/index.css` file
57
+ ```css
58
+ @import '@abgov/styles/styles.esm.css';
17
59
  ```
package/index.d.ts CHANGED
@@ -23,8 +23,9 @@ import { GoAPageLoader } from './lib/page-loader/page-loader';
23
23
  import { GoARadioGroup, GoARadio } from './lib/radio-group/radio-group';
24
24
  import { GoAServiceLevelHeader } from './lib/service-level-header/service-level-header';
25
25
  import { GoATextArea } from './lib/textarea/textarea';
26
+ import { GoASpinner } from './lib/spinner/spinner';
26
27
  import type { GoAIconType } from './lib/icons';
27
28
  import type { GoABadgeType } from './lib/badge/badge';
28
29
  export type { GoAIconType };
29
30
  export type { GoABadgeType };
30
- export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
31
+ export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoASpinner, GoATextArea, GoAWarningBadge, };
package/lib/badge/badge.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { FC } from 'react';
2
2
  import { GoAIconType } from '../icons';
3
- import './badge.scss';
4
3
  export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
5
4
  interface GoABadgeProps {
6
5
  type: GoABadgeType;
package/lib/flex/row.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { FC } from "react";
2
- import './row.scss';
3
2
  interface Props {
4
3
  gap?: 'small' | 'medium' | 'large';
5
4
  minWidth?: number | string;
package/lib/input/input.d.ts CHANGED
@@ -13,7 +13,9 @@ interface WCProps {
13
13
  disabled?: boolean;
14
14
  error?: string;
15
15
  readonly?: boolean;
16
+ focused?: boolean;
16
17
  handletrailingiconclick: boolean;
18
+ testid?: string;
17
19
  }
18
20
  declare global {
19
21
  namespace JSX {
@@ -22,7 +24,7 @@ declare global {
22
24
  }
23
25
  }
24
26
  }
25
- interface Props {
27
+ export interface Props {
26
28
  name: string;
27
29
  value: string;
28
30
  onChange: (name: string, value: string) => void;
@@ -36,6 +38,7 @@ interface Props {
36
38
  focused?: boolean;
37
39
  readonly?: boolean;
38
40
  error?: string;
41
+ testId?: string;
39
42
  }
40
43
  export declare const GoAInput: FC<Props & {
41
44
  type: string;
package/lib/service-level-header/service-level-header.d.ts CHANGED
@@ -9,9 +9,11 @@ declare global {
9
9
  export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
10
10
  interface WebComponentProps {
11
11
  level: ServiceLevel;
12
+ version?: string;
12
13
  }
13
14
  export interface HeaderProps {
14
15
  level: ServiceLevel;
16
+ version?: string;
15
17
  }
16
18
  export declare const GoAServiceLevelHeader: FC<HeaderProps>;
17
19
  export default GoAServiceLevelHeader;
package/lib/spinner/spinner.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
- declare type SpinnerType = "infinite" | "progress";
3
- declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
2
+ export declare type SpinnerType = "infinite" | "progress";
3
+ export declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
4
4
  interface WCProps {
5
5
  size: SpinnerSize;
6
6
  type: SpinnerType;
7
- invert: boolean;
8
- progress: number;
7
+ invert?: boolean;
8
+ progress?: number;
9
+ testid?: string;
9
10
  }
10
11
  declare global {
11
12
  namespace JSX {
@@ -16,9 +17,10 @@ declare global {
16
17
  }
17
18
  export interface SpinnerProps {
18
19
  type: SpinnerType;
19
- size?: SpinnerSize;
20
- invert: boolean;
21
- progress: number;
20
+ size: SpinnerSize;
21
+ invert?: boolean;
22
+ progress?: number;
23
+ testId?: string;
22
24
  }
23
- export declare const GoASpinner: ({ type, size, progress, invert }: SpinnerProps) => JSX.Element;
25
+ export declare const GoASpinner: ({ type, size, progress, invert, testId }: SpinnerProps) => JSX.Element;
24
26
  export default GoASpinner;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "3.4.0-alpha.2",
3
+ "version": "3.4.0-alpha.20",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
@@ -17,7 +17,7 @@
17
17
  "directory": "libs/react-components"
18
18
  },
19
19
  "dependencies": {
20
- "@abgov/web-components": "^0.0.1"
20
+ "@abgov/web-components": "^1.0.0-alpha.4"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": "^17.0.2",
package/react-components.esm.js CHANGED
@@ -15,36 +15,6 @@ const GoAAppHeader = ({
15
15
  }), void 0);
16
16
  };
17
17
 
18
- function styleInject(css, ref) {
19
- if ( ref === void 0 ) ref = {};
20
- var insertAt = ref.insertAt;
21
-
22
- if (!css || typeof document === 'undefined') { return; }
23
-
24
- var head = document.head || document.getElementsByTagName('head')[0];
25
- var style = document.createElement('style');
26
- style.type = 'text/css';
27
-
28
- if (insertAt === 'top') {
29
- if (head.firstChild) {
30
- head.insertBefore(style, head.firstChild);
31
- } else {
32
- head.appendChild(style);
33
- }
34
- } else {
35
- head.appendChild(style);
36
- }
37
-
38
- if (style.styleSheet) {
39
- style.styleSheet.cssText = css;
40
- } else {
41
- style.appendChild(document.createTextNode(css));
42
- }
43
- }
44
-
45
- var css_248z$3 = "goa-badge {\n margin-left: 0.25rem;\n}";
46
- styleInject(css_248z$3);
47
-
48
18
  const GoABadge = ({
49
19
  type,
50
20
  content,
@@ -103,8 +73,35 @@ const GoAEmergencyBadge = ({
103
73
  }, void 0);
104
74
  };
105
75
 
106
- var css_248z$2 = "goa-button + goa-button {\n margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n goa-button + goa-button {\n margin-left: 1rem;\n }\n}\n";
107
- styleInject(css_248z$2);
76
+ function styleInject(css, ref) {
77
+ if ( ref === void 0 ) ref = {};
78
+ var insertAt = ref.insertAt;
79
+
80
+ if (!css || typeof document === 'undefined') { return; }
81
+
82
+ var head = document.head || document.getElementsByTagName('head')[0];
83
+ var style = document.createElement('style');
84
+ style.type = 'text/css';
85
+
86
+ if (insertAt === 'top') {
87
+ if (head.firstChild) {
88
+ head.insertBefore(style, head.firstChild);
89
+ } else {
90
+ head.appendChild(style);
91
+ }
92
+ } else {
93
+ head.appendChild(style);
94
+ }
95
+
96
+ if (style.styleSheet) {
97
+ style.styleSheet.cssText = css;
98
+ } else {
99
+ style.appendChild(document.createTextNode(css));
100
+ }
101
+ }
102
+
103
+ var css_248z$1 = "goa-button + goa-button {\n margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n goa-button + goa-button {\n margin-left: 1rem;\n }\n}\n";
104
+ styleInject(css_248z$1);
108
105
 
109
106
  const GoAButton = ({
110
107
  title,
@@ -144,8 +141,8 @@ const GoAButton = ({
144
141
  }), void 0);
145
142
  };
146
143
 
147
- var css_248z$1 = "goa-button-group > goa-button ~ goa-button {\n margin: 0;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n goa-button-group > goa-button ~ goa-button {\n margin: 0;\n /* margin-left: 0.25rem; */\n }\n}\n";
148
- styleInject(css_248z$1);
144
+ var css_248z = "goa-button-group > goa-button ~ goa-button {\n margin: 0;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n goa-button-group > goa-button ~ goa-button {\n margin: 0;\n /* margin-left: 0.25rem; */\n }\n}\n";
145
+ styleInject(css_248z);
149
146
 
150
147
  const GoAButtonGroup = ({
151
148
  alignment,
@@ -220,7 +217,7 @@ const GoAContainer = ({
220
217
  title,
221
218
  children,
222
219
  actions,
223
- variant: _variant = 'primary'
220
+ variant: _variant = 'default'
224
221
  }) => {
225
222
  return jsxs("goa-container", Object.assign({
226
223
  variant: _variant,
@@ -287,9 +284,6 @@ const GoADropdown = props => {
287
284
  }), void 0);
288
285
  };
289
286
 
290
- var css_248z = "";
291
- styleInject(css_248z);
292
-
293
287
  const GoAFlexRow = ({
294
288
  gap,
295
289
  minWidth,
@@ -475,6 +469,7 @@ const GoAInput = ({
475
469
  value,
476
470
  placeholder,
477
471
  error,
472
+ testId,
478
473
  onTrailingIconClick,
479
474
  onChange
480
475
  }) => {
@@ -490,32 +485,24 @@ const GoAInput = ({
490
485
  const {
491
486
  name,
492
487
  value
493
- } = e.detail.data;
488
+ } = e.detail;
494
489
  onChange(name, value);
495
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
496
-
490
+ };
497
491
 
498
492
  const clickListener = e => {
499
493
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
500
494
  };
501
495
 
502
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
503
-
504
- current.addEventListener('_ontrailingiconclick', clickListener);
496
+ current.addEventListener('_change', changeListener);
497
+ current.addEventListener('_trailingIconClick', clickListener);
505
498
  return () => {
506
499
  current.removeEventListener('_change', changeListener);
507
- current.removeEventListener('_ontrailingiconclick', clickListener);
500
+ current.removeEventListener('_trailingIconClick', clickListener);
508
501
  };
509
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
510
- // if (focused) {
511
- // inputRef.current?.focus();
512
- // } else {
513
- // inputRef.current?.blur();
514
- // }
515
- // }, [focused, inputRef]);
516
-
502
+ }, [ref, onChange, onTrailingIconClick]);
517
503
  return jsx("goa-input", {
518
504
  ref: ref,
505
+ focused: focused,
519
506
  type: type,
520
507
  name: name,
521
508
  id: id,
@@ -526,6 +513,7 @@ const GoAInput = ({
526
513
  readonly: readonly,
527
514
  placeholder: placeholder,
528
515
  error: error,
516
+ "data-testid": testId,
529
517
  value: value,
530
518
  handletrailingiconclick: !!onTrailingIconClick
531
519
  }, void 0);
@@ -600,9 +588,8 @@ const GoAInputNumber = props => {
600
588
  const GoAInputRange = _a => {
601
589
  var props = __rest(_a, ["step"]);
602
590
 
603
- return jsx("input", Object.assign({}, props, {
604
- type: "range",
605
- onChange: e => props.onChange(e.target.name, e.target.value)
591
+ return jsx(GoAInput, Object.assign({}, props, {
592
+ type: "range"
606
593
  }), void 0);
607
594
  };
608
595
 
@@ -727,10 +714,12 @@ const GoARadioGroup = ({
727
714
  };
728
715
 
729
716
  const GoAServiceLevelHeader = ({
730
- level
717
+ level,
718
+ version
731
719
  }) => {
732
720
  return jsx("goa-service-level-header", {
733
- level: level
721
+ level: level,
722
+ version: version
734
723
  }, void 0);
735
724
  };
736
725
 
@@ -773,4 +762,20 @@ const GoATextArea = ({
773
762
  }, void 0);
774
763
  };
775
764
 
776
- export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAHeroBannerContent, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge };
765
+ const GoASpinner = ({
766
+ type,
767
+ size,
768
+ progress,
769
+ invert,
770
+ testId
771
+ }) => {
772
+ return jsx("goa-spinner", {
773
+ type: type,
774
+ size: size,
775
+ progress: progress,
776
+ invert: invert,
777
+ testid: testId
778
+ }, void 0);
779
+ };
780
+
781
+ export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAHeroBannerContent, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
package/react-components.umd.js CHANGED
@@ -58,36 +58,6 @@
58
58
  }), void 0);
59
59
  };
60
60
 
61
- function styleInject(css, ref) {
62
- if ( ref === void 0 ) ref = {};
63
- var insertAt = ref.insertAt;
64
-
65
- if (!css || typeof document === 'undefined') { return; }
66
-
67
- var head = document.head || document.getElementsByTagName('head')[0];
68
- var style = document.createElement('style');
69
- style.type = 'text/css';
70
-
71
- if (insertAt === 'top') {
72
- if (head.firstChild) {
73
- head.insertBefore(style, head.firstChild);
74
- } else {
75
- head.appendChild(style);
76
- }
77
- } else {
78
- head.appendChild(style);
79
- }
80
-
81
- if (style.styleSheet) {
82
- style.styleSheet.cssText = css;
83
- } else {
84
- style.appendChild(document.createTextNode(css));
85
- }
86
- }
87
-
88
- var css_248z$3 = "goa-badge {\n margin-left: 0.25rem;\n}";
89
- styleInject(css_248z$3);
90
-
91
61
  var GoABadge = function GoABadge(_a) {
92
62
  var type = _a.type,
93
63
  content = _a.content,
@@ -141,8 +111,35 @@
141
111
  }, void 0);
142
112
  };
143
113
 
144
- var css_248z$2 = "goa-button + goa-button {\n margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n goa-button + goa-button {\n margin-left: 1rem;\n }\n}\n";
145
- styleInject(css_248z$2);
114
+ function styleInject(css, ref) {
115
+ if ( ref === void 0 ) ref = {};
116
+ var insertAt = ref.insertAt;
117
+
118
+ if (!css || typeof document === 'undefined') { return; }
119
+
120
+ var head = document.head || document.getElementsByTagName('head')[0];
121
+ var style = document.createElement('style');
122
+ style.type = 'text/css';
123
+
124
+ if (insertAt === 'top') {
125
+ if (head.firstChild) {
126
+ head.insertBefore(style, head.firstChild);
127
+ } else {
128
+ head.appendChild(style);
129
+ }
130
+ } else {
131
+ head.appendChild(style);
132
+ }
133
+
134
+ if (style.styleSheet) {
135
+ style.styleSheet.cssText = css;
136
+ } else {
137
+ style.appendChild(document.createTextNode(css));
138
+ }
139
+ }
140
+
141
+ var css_248z$1 = "goa-button + goa-button {\n margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n goa-button + goa-button {\n margin-left: 1rem;\n }\n}\n";
142
+ styleInject(css_248z$1);
146
143
 
147
144
  var GoAButton = function GoAButton(_a) {
148
145
  var title = _a.title,
@@ -185,8 +182,8 @@
185
182
  }), void 0);
186
183
  };
187
184
 
188
- var css_248z$1 = "goa-button-group > goa-button ~ goa-button {\n margin: 0;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n goa-button-group > goa-button ~ goa-button {\n margin: 0;\n /* margin-left: 0.25rem; */\n }\n}\n";
189
- styleInject(css_248z$1);
185
+ var css_248z = "goa-button-group > goa-button ~ goa-button {\n margin: 0;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n goa-button-group > goa-button ~ goa-button {\n margin: 0;\n /* margin-left: 0.25rem; */\n }\n}\n";
186
+ styleInject(css_248z);
190
187
 
191
188
  var GoAButtonGroup = function GoAButtonGroup(_a) {
192
189
  var alignment = _a.alignment,
@@ -261,7 +258,7 @@
261
258
  children = _a.children,
262
259
  actions = _a.actions,
263
260
  _b = _a.variant,
264
- variant = _b === void 0 ? 'primary' : _b;
261
+ variant = _b === void 0 ? 'default' : _b;
265
262
  return jsxRuntime.jsxs("goa-container", __assign({
266
263
  variant: variant,
267
264
  headingsize: headingSize
@@ -326,9 +323,6 @@
326
323
  }), void 0);
327
324
  };
328
325
 
329
- var css_248z = "";
330
- styleInject(css_248z);
331
-
332
326
  var GoAFlexRow = function GoAFlexRow(_a) {
333
327
  var gap = _a.gap,
334
328
  minWidth = _a.minWidth,
@@ -478,13 +472,14 @@
478
472
  leadingIcon = _a.leadingIcon,
479
473
  trailingIcon = _a.trailingIcon,
480
474
  _b = _a.variant,
481
- variant = _b === void 0 ? 'goa' : _b;
482
- _a.focused;
483
- var disabled = _a.disabled,
475
+ variant = _b === void 0 ? 'goa' : _b,
476
+ focused = _a.focused,
477
+ disabled = _a.disabled,
484
478
  readonly = _a.readonly,
485
479
  value = _a.value,
486
480
  placeholder = _a.placeholder,
487
481
  error = _a.error,
482
+ testId = _a.testId,
488
483
  onTrailingIconClick = _a.onTrailingIconClick,
489
484
  onChange = _a.onChange;
490
485
  var ref = React.useRef(null);
@@ -496,34 +491,26 @@
496
491
  var current = ref.current;
497
492
 
498
493
  var changeListener = function changeListener(e) {
499
- var _a = e.detail.data,
494
+ var _a = e.detail,
500
495
  name = _a.name,
501
496
  value = _a.value;
502
497
  onChange(name, value);
503
- }; // TODO: determinw the propery type of the e (CustomEvent does not work)
504
-
498
+ };
505
499
 
506
500
  var clickListener = function clickListener(e) {
507
501
  onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
508
502
  };
509
503
 
510
- current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
511
-
512
- current.addEventListener('_ontrailingiconclick', clickListener);
504
+ current.addEventListener('_change', changeListener);
505
+ current.addEventListener('_trailingIconClick', clickListener);
513
506
  return function () {
514
507
  current.removeEventListener('_change', changeListener);
515
- current.removeEventListener('_ontrailingiconclick', clickListener);
508
+ current.removeEventListener('_trailingIconClick', clickListener);
516
509
  };
517
- }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
518
- // if (focused) {
519
- // inputRef.current?.focus();
520
- // } else {
521
- // inputRef.current?.blur();
522
- // }
523
- // }, [focused, inputRef]);
524
-
510
+ }, [ref, onChange, onTrailingIconClick]);
525
511
  return jsxRuntime.jsx("goa-input", {
526
512
  ref: ref,
513
+ focused: focused,
527
514
  type: type,
528
515
  name: name,
529
516
  id: id,
@@ -534,6 +521,7 @@
534
521
  readonly: readonly,
535
522
  placeholder: placeholder,
536
523
  error: error,
524
+ "data-testid": testId,
537
525
  value: value,
538
526
  handletrailingiconclick: !!onTrailingIconClick
539
527
  }, void 0);
@@ -611,11 +599,8 @@
611
599
  _a.step;
612
600
  var props = __rest(_a, ["step"]);
613
601
 
614
- return jsxRuntime.jsx("input", __assign({}, props, {
615
- type: "range",
616
- onChange: function (e) {
617
- return props.onChange(e.target.name, e.target.value);
618
- }
602
+ return jsxRuntime.jsx(GoAInput, __assign({}, props, {
603
+ type: "range"
619
604
  }), void 0);
620
605
  };
621
606
 
@@ -737,9 +722,11 @@
737
722
  };
738
723
 
739
724
  var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
740
- var level = _a.level;
725
+ var level = _a.level,
726
+ version = _a.version;
741
727
  return jsxRuntime.jsx("goa-service-level-header", {
742
- level: level
728
+ level: level,
729
+ version: version
743
730
  }, void 0);
744
731
  };
745
732
 
@@ -780,6 +767,21 @@
780
767
  }, void 0);
781
768
  };
782
769
 
770
+ var GoASpinner = function GoASpinner(_a) {
771
+ var type = _a.type,
772
+ size = _a.size,
773
+ progress = _a.progress,
774
+ invert = _a.invert,
775
+ testId = _a.testId;
776
+ return jsxRuntime.jsx("goa-spinner", {
777
+ type: type,
778
+ size: size,
779
+ progress: progress,
780
+ invert: invert,
781
+ testid: testId
782
+ }, void 0);
783
+ };
784
+
783
785
  exports.GoAAppHeader = GoAAppHeader;
784
786
  exports.GoABadge = GoABadge;
785
787
  exports.GoAButton = GoAButton;
@@ -818,6 +820,7 @@
818
820
  exports.GoARadio = GoARadio;
819
821
  exports.GoARadioGroup = GoARadioGroup;
820
822
  exports.GoAServiceLevelHeader = GoAServiceLevelHeader;
823
+ exports.GoASpinner = GoASpinner;
821
824
  exports.GoASuccessBadge = GoASuccessBadge;
822
825
  exports.GoATextArea = GoATextArea;
823
826
  exports.GoAWarningBadge = GoAWarningBadge;