@coorpacademy/components 11.36.1 → 11.36.2-alpha.9

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 (89) hide show
  1. package/es/atom/input-select/index.d.ts +28 -0
  2. package/es/atom/input-select/index.d.ts.map +1 -0
  3. package/es/atom/input-select/index.js +109 -0
  4. package/es/atom/input-select/index.js.map +1 -0
  5. package/es/atom/input-select/style.css +169 -0
  6. package/es/atom/input-switch/index.d.ts +1 -0
  7. package/es/atom/input-switch/index.d.ts.map +1 -1
  8. package/es/atom/input-switch/index.js +18 -5
  9. package/es/atom/input-switch/index.js.map +1 -1
  10. package/es/atom/input-switch/style.css +75 -0
  11. package/es/atom/link/index.d.ts.map +1 -1
  12. package/es/atom/link/index.js +3 -0
  13. package/es/atom/link/index.js.map +1 -1
  14. package/es/molecule/cm-popin/types.d.ts +1 -0
  15. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  16. package/es/molecule/draggable-list/index.d.ts +1 -0
  17. package/es/molecule/setup-section/index.d.ts +1 -0
  18. package/es/molecule/setup-section/index.d.ts.map +1 -1
  19. package/es/molecule/setup-sections/index.d.ts +1 -0
  20. package/es/organism/brand-learning-priorities/index.d.ts +1 -0
  21. package/es/organism/mooc-header/index.d.ts +1 -0
  22. package/es/organism/mooc-header/index.d.ts.map +1 -1
  23. package/es/organism/mooc-header/index.js +53 -54
  24. package/es/organism/mooc-header/index.js.map +1 -1
  25. package/es/organism/mooc-header/style.css +122 -110
  26. package/es/organism/user-preferences/index.d.ts +1 -0
  27. package/es/template/app-player/loading/index.d.ts +1 -0
  28. package/es/template/app-player/player/index.d.ts +2 -0
  29. package/es/template/app-player/player/slides/index.d.ts +1 -0
  30. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  31. package/es/template/app-player/popin-correction/index.d.ts +1 -0
  32. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  33. package/es/template/app-player/popin-end/index.d.ts +1 -0
  34. package/es/template/app-review/index.d.ts +1 -0
  35. package/es/template/app-review/index.d.ts.map +1 -1
  36. package/es/template/app-review/player/prop-types.d.ts +1 -0
  37. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  38. package/es/template/app-review/prop-types.d.ts +1 -0
  39. package/es/template/app-review/prop-types.d.ts.map +1 -1
  40. package/es/template/back-office/brand-update/index.d.ts +2 -0
  41. package/es/template/common/dashboard/index.d.ts +2 -0
  42. package/es/template/common/search-page/index.d.ts +1 -0
  43. package/es/template/external-course/index.d.ts +1 -0
  44. package/es/variables/colors.css +8 -6
  45. package/lib/atom/input-select/index.d.ts +28 -0
  46. package/lib/atom/input-select/index.d.ts.map +1 -0
  47. package/lib/atom/input-select/index.js +116 -0
  48. package/lib/atom/input-select/index.js.map +1 -0
  49. package/lib/atom/input-select/style.css +169 -0
  50. package/lib/atom/input-switch/index.d.ts +1 -0
  51. package/lib/atom/input-switch/index.d.ts.map +1 -1
  52. package/lib/atom/input-switch/index.js +18 -5
  53. package/lib/atom/input-switch/index.js.map +1 -1
  54. package/lib/atom/input-switch/style.css +75 -0
  55. package/lib/atom/link/index.d.ts.map +1 -1
  56. package/lib/atom/link/index.js +3 -0
  57. package/lib/atom/link/index.js.map +1 -1
  58. package/lib/molecule/cm-popin/types.d.ts +1 -0
  59. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  60. package/lib/molecule/draggable-list/index.d.ts +1 -0
  61. package/lib/molecule/setup-section/index.d.ts +1 -0
  62. package/lib/molecule/setup-section/index.d.ts.map +1 -1
  63. package/lib/molecule/setup-sections/index.d.ts +1 -0
  64. package/lib/organism/brand-learning-priorities/index.d.ts +1 -0
  65. package/lib/organism/mooc-header/index.d.ts +1 -0
  66. package/lib/organism/mooc-header/index.d.ts.map +1 -1
  67. package/lib/organism/mooc-header/index.js +52 -53
  68. package/lib/organism/mooc-header/index.js.map +1 -1
  69. package/lib/organism/mooc-header/style.css +122 -110
  70. package/lib/organism/user-preferences/index.d.ts +1 -0
  71. package/lib/template/app-player/loading/index.d.ts +1 -0
  72. package/lib/template/app-player/player/index.d.ts +2 -0
  73. package/lib/template/app-player/player/slides/index.d.ts +1 -0
  74. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  75. package/lib/template/app-player/popin-correction/index.d.ts +1 -0
  76. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  77. package/lib/template/app-player/popin-end/index.d.ts +1 -0
  78. package/lib/template/app-review/index.d.ts +1 -0
  79. package/lib/template/app-review/index.d.ts.map +1 -1
  80. package/lib/template/app-review/player/prop-types.d.ts +1 -0
  81. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  82. package/lib/template/app-review/prop-types.d.ts +1 -0
  83. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  84. package/lib/template/back-office/brand-update/index.d.ts +2 -0
  85. package/lib/template/common/dashboard/index.d.ts +2 -0
  86. package/lib/template/common/search-page/index.d.ts +1 -0
  87. package/lib/template/external-course/index.d.ts +1 -0
  88. package/lib/variables/colors.css +8 -6
  89. package/package.json +7 -7
@@ -0,0 +1,28 @@
1
+ export default InputSelect;
2
+ declare function InputSelect({ options, value, onChange, placeholder, className, "aria-label": ariaLabel, iconClosed, selectedIcon }: {
3
+ options?: any[] | undefined;
4
+ value: any;
5
+ onChange: any;
6
+ placeholder: any;
7
+ className: any;
8
+ "aria-label": any;
9
+ iconClosed?: string | undefined;
10
+ selectedIcon?: string | undefined;
11
+ }): JSX.Element;
12
+ declare namespace InputSelect {
13
+ const propTypes: {
14
+ options: PropTypes.Requireable<(PropTypes.InferProps<{
15
+ value: PropTypes.Validator<string>;
16
+ label: PropTypes.Validator<string>;
17
+ }> | null | undefined)[]>;
18
+ value: PropTypes.Requireable<string>;
19
+ onChange: PropTypes.Requireable<(...args: any[]) => any>;
20
+ placeholder: PropTypes.Requireable<string>;
21
+ className: PropTypes.Requireable<string>;
22
+ 'aria-label': PropTypes.Requireable<string>;
23
+ iconClosed: PropTypes.Requireable<string>;
24
+ selectedIcon: PropTypes.Requireable<string>;
25
+ };
26
+ }
27
+ import PropTypes from "prop-types";
28
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.js"],"names":[],"mappings":";AAQA;;;;;;;;;gBAqGC"}
@@ -0,0 +1,109 @@
1
+ import React, { useState, useRef, useCallback } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classnames from 'classnames';
4
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
+ import style from './style.css';
6
+ const COMPONENT_ID = 'input-select';
7
+ const InputSelect = ({
8
+ options = [],
9
+ value,
10
+ onChange,
11
+ placeholder,
12
+ className,
13
+ 'aria-label': ariaLabel,
14
+ iconClosed = 'chevron-down',
15
+ selectedIcon = 'circle-check'
16
+ }) => {
17
+ const [open, setOpen] = useState(false);
18
+ const wrapperRef = useRef(null);
19
+ const componentId = `${COMPONENT_ID}-${placeholder?.toLowerCase().replace(/\s+/g, '-') || 'default'}`;
20
+ const handleToggle = useCallback(() => {
21
+ setOpen(o => !o);
22
+ }, []);
23
+ const handleOnOptionClick = useCallback(optionValue => {
24
+ onChange(optionValue);
25
+ setOpen(false);
26
+ }, [onChange]);
27
+ React.useEffect(() => {
28
+ if (!open) return;
29
+ const handleClickOutside = event => {
30
+ if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
31
+ setOpen(false);
32
+ }
33
+ };
34
+ document.addEventListener('mousedown', handleClickOutside);
35
+ return () => document.removeEventListener('mousedown', handleClickOutside);
36
+ }, [open]);
37
+ const selectedOption = options.find(opt => opt.value === value);
38
+ const renderOption = option => {
39
+ function handleClick() {
40
+ handleOnOptionClick(option.value);
41
+ }
42
+ return /*#__PURE__*/React.createElement("li", {
43
+ key: option.value,
44
+ className: classnames(style.option, option.value === value && style.selected),
45
+ role: "option",
46
+ "aria-selected": option.value === value,
47
+ onClick: handleClick
48
+ }, /*#__PURE__*/React.createElement("span", {
49
+ className: style.optionIcon
50
+ }, option.icon), /*#__PURE__*/React.createElement("span", {
51
+ className: style.optionLabel
52
+ }, option.label), option.value === value ? /*#__PURE__*/React.createElement("span", {
53
+ className: style.checkIcon
54
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
55
+ icon: selectedIcon
56
+ })) : null);
57
+ };
58
+ return /*#__PURE__*/React.createElement("div", {
59
+ className: classnames(style.outerWrapper, {
60
+ [style.open]: open
61
+ })
62
+ }, /*#__PURE__*/React.createElement("div", {
63
+ ref: wrapperRef,
64
+ className: classnames(style.wrapper, className),
65
+ "aria-label": ariaLabel
66
+ }, /*#__PURE__*/React.createElement("button", {
67
+ type: "button",
68
+ className: style.display,
69
+ onClick: handleToggle,
70
+ "aria-haspopup": "listbox",
71
+ "aria-expanded": open,
72
+ "aria-controls": open ? `${componentId}-listbox` : undefined,
73
+ id: componentId
74
+ }, /*#__PURE__*/React.createElement("div", {
75
+ className: style.content
76
+ }, /*#__PURE__*/React.createElement("span", {
77
+ className: style.label
78
+ }, placeholder), selectedOption ? /*#__PURE__*/React.createElement("span", {
79
+ className: style.value
80
+ }, selectedOption.label) : null), /*#__PURE__*/React.createElement("span", {
81
+ className: classnames(style.iconWrapper, {
82
+ [style.open]: open
83
+ })
84
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
85
+ className: classnames(style.icon, {
86
+ [style.rotated]: open
87
+ }),
88
+ icon: iconClosed
89
+ }))), open ? /*#__PURE__*/React.createElement("ul", {
90
+ id: `${componentId}-listbox`,
91
+ className: style.menu,
92
+ role: "listbox"
93
+ }, options.map(renderOption)) : null));
94
+ };
95
+ InputSelect.propTypes = process.env.NODE_ENV !== "production" ? {
96
+ options: PropTypes.arrayOf(PropTypes.shape({
97
+ value: PropTypes.string.isRequired,
98
+ label: PropTypes.string.isRequired
99
+ })),
100
+ value: PropTypes.string,
101
+ onChange: PropTypes.func,
102
+ placeholder: PropTypes.string,
103
+ className: PropTypes.string,
104
+ 'aria-label': PropTypes.string,
105
+ iconClosed: PropTypes.string,
106
+ selectedIcon: PropTypes.string
107
+ } : {};
108
+ export default InputSelect;
109
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","PropTypes","classnames","FontAwesomeIcon","style","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menu","map","propTypes","process","env","NODE_ENV","arrayOf","shape","string","isRequired","func"],"sources":["../../../src/atom/input-select/index.js"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport style from './style.css';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n optionValue => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = event => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = option => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, option.value === value && style.selected)}\n role=\"option\"\n aria-selected={option.value === value}\n onClick={handleClick}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {option.value === value ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div ref={wrapperRef} className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed}\n />\n </span>\n </button>\n {open ? (\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n ) : null}\n </div>\n </div>\n );\n};\n\nInputSelect.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired\n })\n ),\n value: PropTypes.string,\n onChange: PropTypes.func,\n placeholder: PropTypes.string,\n className: PropTypes.string,\n 'aria-label': PropTypes.string,\n iconClosed: PropTypes.string,\n selectedIcon: PropTypes.string\n};\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,169 @@
1
+ @value colors: "../../variables/colors.css";
2
+ @value cm_grey_700 from colors;
3
+ @value cm_grey_500 from colors;
4
+ @value cm_grey_400 from colors;
5
+ @value cm_grey_200 from colors;
6
+ @value cm_negative_300 from colors;
7
+ @value white from colors;
8
+ @value cm_grey_100 from colors;
9
+ @value brand from colors;
10
+ @value cm_primary_blue from colors;
11
+ @value primary_100 from colors;
12
+ @value cm_blue_50 from colors;
13
+ @value cm_grey_150 from colors;
14
+
15
+ .outerWrapper {
16
+ width: 100%;
17
+ border-radius: 12px;
18
+ transition: box-shadow 0.2s;
19
+ }
20
+
21
+ .outerWrapper:hover {
22
+ box-shadow: 0 0 0 2px brand;
23
+ }
24
+
25
+ .outerWrapper.open {
26
+ box-shadow: 0 0 0 2px white, 0 0 0 4px brand;
27
+ }
28
+
29
+ .wrapper {
30
+ background: white;
31
+ border-radius: 12px;
32
+ position: relative;
33
+ width: 100%;
34
+ }
35
+
36
+ .display {
37
+ width: 100%;
38
+ height: 44px;
39
+ background: cm_grey_100;
40
+ border: none;
41
+ border-radius: 12px;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: space-between;
45
+ padding: 0 4px 0 24px;
46
+ cursor: pointer;
47
+ transition: box-shadow 0.2s;
48
+ font-family: 'Gilroy';
49
+ font-size: 14px;
50
+ font-weight: 500;
51
+ outline: none;
52
+ }
53
+
54
+ .content {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 8px;
58
+ flex: 1;
59
+ }
60
+
61
+ .label {
62
+ color: cm_grey_400;
63
+ font-weight: 400;
64
+ font-size: 14px;
65
+ }
66
+
67
+ .value {
68
+ color: cm_grey_700;
69
+ font-weight: 700;
70
+ font-size: 14px;
71
+ }
72
+ .iconWrapper{
73
+ width: 36px;
74
+ height: 36px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ }
79
+
80
+ .iconWrapper.open{
81
+ background-color: cm_grey_150;
82
+ border-radius: 8px;
83
+ }
84
+
85
+ .icon {
86
+ color: cm_grey_500;
87
+ width: 14px;
88
+ height: 14px;
89
+ display: flex;
90
+ align-items: center;
91
+ transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
92
+ }
93
+
94
+ .rotated {
95
+ transform: rotate(180deg);
96
+ }
97
+
98
+ .menu {
99
+ position: absolute;
100
+ left: 0;
101
+ right: 0;
102
+ margin-top: 8px;
103
+ background: white;
104
+ border-radius: 12px;
105
+ box-shadow: 0 4px 8px 0px rgba(0,0,0,0.04);
106
+ z-index: 10;
107
+ padding: 12px;
108
+ list-style: none;
109
+ width: 100%;
110
+ box-sizing: border-box;
111
+ }
112
+
113
+ .option {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: space-between;
117
+ padding: 12px 12px;
118
+ font-size: 14px;
119
+ color: cm_grey_700;
120
+ cursor: pointer;
121
+ background: white;
122
+ border: none;
123
+ text-align: left;
124
+ width: 100%;
125
+ font-family: 'Gilroy';
126
+ transition: background 0.15s, color 0.15s;
127
+ box-sizing: border-box;
128
+ border-radius: 12px;
129
+ margin-bottom: 4px;
130
+ }
131
+
132
+ .option.selected {
133
+ background-color: color(brand lightness(95%));
134
+ }
135
+
136
+ .option.selected:hover,
137
+ .option.selected:focus {
138
+ background-color: color(brand lightness(90%));
139
+ }
140
+
141
+ .option:hover:not(.selected),
142
+ .option:focus:not(.selected) {
143
+ background: cm_grey_100;
144
+ }
145
+
146
+ .wrapper:disabled::after {
147
+ border-top-color: cm_grey_500;
148
+ }
149
+
150
+ .optionIcon {
151
+ margin-right: 12px;
152
+ font-size: 20px;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ }
156
+
157
+ .optionLabel {
158
+ flex: 1;
159
+ font-size: 14px;
160
+ color: cm_grey_700;
161
+ display: flex;
162
+ align-items: center;
163
+ }
164
+
165
+ .checkIcon {
166
+ color: brand;
167
+ display: inline-flex;
168
+ align-items: center;
169
+ }
@@ -17,6 +17,7 @@ declare namespace InputSwitch {
17
17
  details: PropTypes.Requireable<string>;
18
18
  'data-name': PropTypes.Requireable<string>;
19
19
  requiredSelection: PropTypes.Requireable<boolean>;
20
+ icon: PropTypes.Requireable<string>;
20
21
  };
21
22
  }
22
23
  import PropTypes from "prop-types";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAsFC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAOA,sDA8FC"}
@@ -3,6 +3,7 @@ import _noop from "lodash/fp/noop";
3
3
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
4
4
  import React, { useMemo } from 'react';
5
5
  import PropTypes from 'prop-types';
6
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
7
  import getClassState from '../../util/get-class-state';
7
8
  import style from './style.css';
8
9
  const InputSwitch = props => {
@@ -21,15 +22,21 @@ const InputSwitch = props => {
21
22
  requiredSelection = false,
22
23
  'data-name': dataName,
23
24
  'aria-labelledby': ariaLabelledBy,
24
- 'aria-label': ariaLabel
25
+ 'aria-label': ariaLabel,
26
+ icon
25
27
  } = props;
26
28
  const idSwitch = id || _uniqueId('input-switch-');
27
29
  const isDisabled = disabled ? 'disabled' : '';
28
30
  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
29
- const titleView = title ? /*#__PURE__*/React.createElement("span", {
31
+ const titleView = title ? /*#__PURE__*/React.createElement("div", {
32
+ className: icon ? style.titleContainer : null
33
+ }, icon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
34
+ icon: icon,
35
+ className: style.icon
36
+ }) : null, /*#__PURE__*/React.createElement("span", {
30
37
  id: `title-view-${dataName}`,
31
38
  className: style.title
32
- }, `${title} `, ' ') : null;
39
+ }, title)) : null;
33
40
  const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
34
41
  className: style.description
35
42
  }, description) : null;
@@ -40,6 +47,11 @@ const InputSwitch = props => {
40
47
  defaultClass: style.coorpmanager,
41
48
  modifiedClass: style.coorpmanagerModified
42
49
  };
50
+ case 'newMooc':
51
+ return {
52
+ defaultClass: style.newMooc,
53
+ modifiedClass: style.newMoocModified
54
+ };
43
55
  case 'mooc':
44
56
  return {
45
57
  defaultClass: style.partielUncheck,
@@ -103,10 +115,11 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
103
115
  'aria-label': PropTypes.string,
104
116
  modified: PropTypes.bool,
105
117
  titlePosition: PropTypes.oneOf(['right', 'left']),
106
- theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
118
+ theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),
107
119
  details: PropTypes.string,
108
120
  'data-name': PropTypes.string,
109
- requiredSelection: PropTypes.bool
121
+ requiredSelection: PropTypes.bool,
122
+ icon: PropTypes.string
110
123
  } : {};
111
124
  export default InputSwitch;
112
125
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? (\n <span id={`title-view-${dataName}`} className={style.title}>\n {`${title} `}{' '}\n </span>\n ) : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.defaultStyle, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel,\n icon\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n const titleView = title ? (\n <div className={icon ? style.titleContainer : null}>\n {icon ? <FontAwesomeIcon icon={icon} className={style.icon} /> : null}\n <span id={`title-view-${dataName}`} className={style.title}>\n {title}\n </span>\n </div>\n ) : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'newMooc':\n return {\n defaultClass: style.newMooc,\n modifiedClass: style.newMoocModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.defaultStyle, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool,\n icon: PropTypes.string\n};\nexport default InputSwitch;\n"],"mappings":"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","ignoreList":[]}
@@ -1,4 +1,6 @@
1
1
  @value colors: "../../variables/colors.css";
2
+ @value breakpoints: "../../variables/breakpoints.css";
3
+ @value tablet from breakpoints;
2
4
  @value orange from colors;
3
5
  @value medium from colors;
4
6
  @value white from colors;
@@ -9,6 +11,7 @@
9
11
  @value black from colors;
10
12
  @value cm_primary_blue from colors;
11
13
  @value light_blue from colors;
14
+ @value cm_grey_700 from colors;
12
15
 
13
16
  .defaultStyle {
14
17
  display: flex;
@@ -208,3 +211,75 @@
208
211
  border-color: cm_primary_blue;
209
212
  opacity: 0.4;
210
213
  }
214
+
215
+ .newMooc {
216
+ composes: defaultStyle;
217
+ width: 100%;
218
+ }
219
+
220
+ .newMoocModified {
221
+ composes: modified;
222
+ }
223
+
224
+ .newMooc label, .newMoocModified label {
225
+ height: 24px;
226
+ border: solid 2px cm_grey_200;
227
+ margin-right: 16px;
228
+ background: cm_grey_200;
229
+ }
230
+
231
+ .newMooc label::after, .newMoocModified label::after {
232
+ top: 1px;
233
+ width: 22px;
234
+ height: 22px;
235
+ }
236
+
237
+ .newMooc span, .newMoocModified span {
238
+ font-family: Gilroy;
239
+ font-weight: bold;
240
+ color: black;
241
+ font-size: 14px;
242
+ font-weight: 600;
243
+ line-height: 20px;
244
+ color: cm_grey_700;
245
+ }
246
+
247
+ .newMooc .checkbox:checked ~ label {
248
+ background: cm_primary_blue;
249
+ border-color: cm_primary_blue;
250
+ }
251
+
252
+ .newMooc .checkbox:disabled ~ label {
253
+ border-color: cm_grey_200;
254
+ pointer-events: none;
255
+ background: cm_grey_200;
256
+ opacity: 0.4;
257
+ }
258
+
259
+ .newMooc .checkbox:disabled ~ label::after {
260
+ background: white;
261
+ }
262
+
263
+ .titleContainer {
264
+ display: flex;
265
+ align-items: center;
266
+ align-content: flex-start;
267
+ justify-content: center;
268
+ gap: 8px;
269
+ flex: 1;
270
+ }
271
+
272
+ .titleContainer .title {
273
+ width: 100%;
274
+ }
275
+
276
+ .icon {
277
+ width: 14px;
278
+ height: 14px;
279
+ }
280
+
281
+ @media tablet {
282
+ .icon {
283
+ display: none;
284
+ }
285
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEAwEC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA2EC"}
@@ -25,6 +25,7 @@ const Link = (props, legacyContext) => {
25
25
  onMouseLeave = _noop,
26
26
  download,
27
27
  disabled,
28
+ className,
28
29
  ...restProps
29
30
  } = props;
30
31
  const navigate = useMemo(() => pushToHistory(legacyContext)({
@@ -59,6 +60,7 @@ const Link = (props, legacyContext) => {
59
60
  type: "button",
60
61
  onClick: disabled ? _noop : handleOnClick,
61
62
  style: style,
63
+ className: className,
62
64
  onMouseEnter: handleMouseEnter,
63
65
  onMouseLeave: handleMouseLeave
64
66
  }), children) : /*#__PURE__*/React.createElement("a", _extends({}, restProps, {
@@ -66,6 +68,7 @@ const Link = (props, legacyContext) => {
66
68
  href: disabled || !href ? undefined : createHref(href),
67
69
  onClick: disabled ? _noop : handleOnClick,
68
70
  style: style,
71
+ className: className,
69
72
  onMouseEnter: handleMouseEnter,
70
73
  onMouseLeave: handleMouseLeave
71
74
  }), children);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","Provider","pushToHistory","Link","props","legacyContext","hovered","setHovered","history","createHref","_identity","hoverColor","hoverBackgroundColor","dataName","useButtonTag","href","onClick","_noop","style","customStyle","children","onMouseEnter","onMouseLeave","download","disabled","restProps","navigate","handleMouseEnter","handleMouseLeave","handleOnClick","e","backgroundColor","undefined","color","pointerEvents","createElement","_extends","type","propTypes","process","env","NODE_ENV","node","className","string","title","target","oneOf","bool","func","shape","contextTypes","skin","childContextTypes"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, noop} from 'lodash/fp';\nimport Provider from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nconst Link = (props, legacyContext) => {\n const [hovered, setHovered] = useState(false);\n const {history: {createHref = identity} = {}} = legacyContext;\n\n const {\n hoverColor,\n hoverBackgroundColor,\n 'data-name': dataName = 'link',\n useButtonTag = false,\n href,\n onClick = noop,\n style: customStyle,\n children,\n onMouseEnter = noop,\n onMouseLeave = noop,\n download,\n disabled,\n ...restProps\n } = props;\n\n const navigate = useMemo(() => pushToHistory(legacyContext)({href}), [href, legacyContext]);\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n onMouseEnter();\n }, [onMouseEnter]);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n onMouseLeave();\n }, [onMouseLeave]);\n\n const handleOnClick = useCallback(\n e => {\n onClick(e);\n if (!download) navigate(e);\n },\n [download, navigate, onClick]\n );\n\n const style = {\n ...customStyle,\n ...(hovered && hoverBackgroundColor ? {backgroundColor: hoverBackgroundColor} : undefined),\n ...(hovered && hoverColor ? {color: hoverColor} : undefined),\n ...(href || onClick ? null : {pointerEvents: 'none'})\n };\n\n return useButtonTag ? (\n <button\n {...restProps}\n data-name={dataName}\n type=\"button\"\n onClick={disabled ? noop : handleOnClick}\n style={style}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {children}\n </button>\n ) : (\n <a\n {...restProps}\n data-name={dataName}\n href={disabled || !href ? undefined : createHref(href)}\n onClick={disabled ? noop : handleOnClick}\n style={style}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {children}\n </a>\n );\n};\n\nLink.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n href: PropTypes.string,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string,\n title: PropTypes.string,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n hoverColor: PropTypes.string,\n hoverBackgroundColor: PropTypes.string,\n download: PropTypes.bool,\n onClick: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n useButtonTag: PropTypes.bool,\n style: PropTypes.shape({}),\n disabled: PropTypes.bool\n};\n\nLink.contextTypes = {\n skin: Provider.childContextTypes.skin,\n history: Provider.childContextTypes.history\n};\n\nexport default Link;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","Provider","pushToHistory","Link","props","legacyContext","hovered","setHovered","history","createHref","_identity","hoverColor","hoverBackgroundColor","dataName","useButtonTag","href","onClick","_noop","style","customStyle","children","onMouseEnter","onMouseLeave","download","disabled","className","restProps","navigate","handleMouseEnter","handleMouseLeave","handleOnClick","e","backgroundColor","undefined","color","pointerEvents","createElement","_extends","type","propTypes","process","env","NODE_ENV","node","string","title","target","oneOf","bool","func","shape","contextTypes","skin","childContextTypes"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, noop} from 'lodash/fp';\nimport Provider from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nconst Link = (props, legacyContext) => {\n const [hovered, setHovered] = useState(false);\n const {history: {createHref = identity} = {}} = legacyContext;\n\n const {\n hoverColor,\n hoverBackgroundColor,\n 'data-name': dataName = 'link',\n useButtonTag = false,\n href,\n onClick = noop,\n style: customStyle,\n children,\n onMouseEnter = noop,\n onMouseLeave = noop,\n download,\n disabled,\n className,\n ...restProps\n } = props;\n\n const navigate = useMemo(() => pushToHistory(legacyContext)({href}), [href, legacyContext]);\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n onMouseEnter();\n }, [onMouseEnter]);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n onMouseLeave();\n }, [onMouseLeave]);\n\n const handleOnClick = useCallback(\n e => {\n onClick(e);\n if (!download) navigate(e);\n },\n [download, navigate, onClick]\n );\n\n const style = {\n ...customStyle,\n ...(hovered && hoverBackgroundColor ? {backgroundColor: hoverBackgroundColor} : undefined),\n ...(hovered && hoverColor ? {color: hoverColor} : undefined),\n ...(href || onClick ? null : {pointerEvents: 'none'})\n };\n\n return useButtonTag ? (\n <button\n {...restProps}\n data-name={dataName}\n type=\"button\"\n onClick={disabled ? noop : handleOnClick}\n style={style}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {children}\n </button>\n ) : (\n <a\n {...restProps}\n data-name={dataName}\n href={disabled || !href ? undefined : createHref(href)}\n onClick={disabled ? noop : handleOnClick}\n style={style}\n className={className}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {children}\n </a>\n );\n};\n\nLink.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n href: PropTypes.string,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string,\n title: PropTypes.string,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n hoverColor: PropTypes.string,\n hoverBackgroundColor: PropTypes.string,\n download: PropTypes.bool,\n onClick: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n useButtonTag: PropTypes.bool,\n style: PropTypes.shape({}),\n disabled: PropTypes.bool\n};\n\nLink.contextTypes = {\n skin: Provider.childContextTypes.skin,\n history: Provider.childContextTypes.history\n};\n\nexport default Link;\n"],"mappings":"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","ignoreList":[]}
@@ -149,6 +149,7 @@ declare const propTypes: {
149
149
  details: PropTypes.Requireable<string>;
150
150
  'data-name': PropTypes.Requireable<string>;
151
151
  requiredSelection: PropTypes.Requireable<boolean>;
152
+ icon: PropTypes.Requireable<string>;
152
153
  }> | null | undefined)[]>;
153
154
  items: PropTypes.Requireable<PropTypes.InferProps<{
154
155
  type: PropTypes.Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"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"}
@@ -26,6 +26,7 @@ declare namespace DraggableList {
26
26
  details: PropTypes.Requireable<string>;
27
27
  'data-name': PropTypes.Requireable<string>;
28
28
  requiredSelection: PropTypes.Requireable<boolean>;
29
+ icon: PropTypes.Requireable<string>;
29
30
  }>>;
30
31
  contentTypes: PropTypes.Requireable<PropTypes.InferProps<{
31
32
  modified: PropTypes.Requireable<boolean>;
@@ -45,6 +45,7 @@ declare namespace SetupSection {
45
45
  details: PropTypes.Requireable<string>;
46
46
  'data-name': PropTypes.Requireable<string>;
47
47
  requiredSelection: PropTypes.Requireable<boolean>;
48
+ icon: PropTypes.Requireable<string>;
48
49
  }>>;
49
50
  import contentTypes = contentTypes;
50
51
  export { contentTypes };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/setup-section/index.js"],"names":[],"mappings":";AA0CA,qEAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhDD,mFAqBC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/setup-section/index.js"],"names":[],"mappings":";AA0CA,qEAeC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhDD,mFAqBC"}