@ncds/ui-admin 0.0.22 → 0.0.24

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 (97) hide show
  1. package/dist/cjs/assets/scripts/index.js +11 -0
  2. package/dist/cjs/assets/scripts/slider.js +341 -0
  3. package/dist/cjs/index.js +0 -33
  4. package/dist/cjs/src/components/button/Button.js +15 -7
  5. package/dist/cjs/src/components/button/ButtonGroup.js +1 -1
  6. package/dist/cjs/src/components/date-picker/index.js +0 -11
  7. package/dist/cjs/src/components/divider/Divider.js +43 -0
  8. package/dist/cjs/src/components/divider/index.js +16 -0
  9. package/dist/cjs/src/components/empty-state/EmptyState.js +58 -0
  10. package/dist/cjs/src/components/empty-state/index.js +16 -0
  11. package/dist/cjs/src/components/featured-icon/FeaturedIcon.js +79 -0
  12. package/dist/cjs/src/components/featured-icon/index.js +16 -0
  13. package/dist/cjs/src/components/index.js +81 -4
  14. package/dist/cjs/src/components/input/InputBase.js +27 -14
  15. package/dist/cjs/src/components/modal/Modal.js +193 -0
  16. package/dist/cjs/src/components/modal/index.js +12 -0
  17. package/dist/cjs/src/components/notification/FloatingNotification.js +104 -0
  18. package/dist/cjs/src/components/notification/FullWidthNotification.js +112 -0
  19. package/dist/cjs/src/components/notification/Notification.js +66 -0
  20. package/dist/cjs/src/components/notification/index.js +38 -0
  21. package/dist/cjs/src/components/pagination/NavButton.js +6 -4
  22. package/dist/cjs/src/components/pagination/Pagination.js +4 -19
  23. package/dist/cjs/src/components/progress-bar/ProgressBar.js +57 -0
  24. package/dist/cjs/src/components/progress-bar/index.js +16 -0
  25. package/dist/cjs/src/components/progress-circle/ProgressCircle.js +121 -0
  26. package/dist/cjs/src/components/progress-circle/index.js +16 -0
  27. package/dist/cjs/src/components/slider/Slider.js +64 -0
  28. package/dist/cjs/src/components/slider/index.js +16 -0
  29. package/dist/cjs/src/components/tab/HorizontalTab.js +77 -0
  30. package/dist/cjs/src/components/tab/TabButton.js +76 -0
  31. package/dist/cjs/src/components/tab/VerticalTab.js +75 -0
  32. package/dist/cjs/src/components/tab/index.js +38 -0
  33. package/dist/esm/assets/scripts/index.js +2 -1
  34. package/dist/esm/assets/scripts/slider.js +336 -0
  35. package/dist/esm/index.js +0 -3
  36. package/dist/esm/src/components/button/Button.js +14 -6
  37. package/dist/esm/src/components/button/ButtonGroup.js +1 -1
  38. package/dist/esm/src/components/date-picker/index.js +1 -2
  39. package/dist/esm/src/components/divider/Divider.js +36 -0
  40. package/dist/esm/src/components/divider/index.js +1 -0
  41. package/dist/esm/src/components/empty-state/EmptyState.js +51 -0
  42. package/dist/esm/src/components/empty-state/index.js +1 -0
  43. package/dist/esm/src/components/featured-icon/FeaturedIcon.js +72 -0
  44. package/dist/esm/src/components/featured-icon/index.js +1 -0
  45. package/dist/esm/src/components/index.js +8 -1
  46. package/dist/esm/src/components/input/InputBase.js +27 -14
  47. package/dist/esm/src/components/modal/Modal.js +185 -0
  48. package/dist/esm/src/components/modal/index.js +1 -0
  49. package/dist/esm/src/components/notification/FloatingNotification.js +97 -0
  50. package/dist/esm/src/components/notification/FullWidthNotification.js +105 -0
  51. package/dist/esm/src/components/notification/Notification.js +59 -0
  52. package/dist/esm/src/components/notification/index.js +3 -0
  53. package/dist/esm/src/components/pagination/NavButton.js +6 -4
  54. package/dist/esm/src/components/pagination/Pagination.js +4 -19
  55. package/dist/esm/src/components/progress-bar/ProgressBar.js +50 -0
  56. package/dist/esm/src/components/progress-bar/index.js +1 -0
  57. package/dist/esm/src/components/progress-circle/ProgressCircle.js +114 -0
  58. package/dist/esm/src/components/progress-circle/index.js +1 -0
  59. package/dist/esm/src/components/slider/Slider.js +57 -0
  60. package/dist/esm/src/components/slider/index.js +1 -0
  61. package/dist/esm/src/components/tab/HorizontalTab.js +69 -0
  62. package/dist/esm/src/components/tab/TabButton.js +68 -0
  63. package/dist/esm/src/components/tab/VerticalTab.js +67 -0
  64. package/dist/esm/src/components/tab/index.js +3 -0
  65. package/dist/types/assets/scripts/index.d.ts +1 -0
  66. package/dist/types/assets/scripts/slider.d.ts +42 -0
  67. package/dist/types/index.d.ts +0 -3
  68. package/dist/types/src/components/button/Button.d.ts +2 -1
  69. package/dist/types/src/components/button/ButtonGroup.d.ts +6 -5
  70. package/dist/types/src/components/date-picker/index.d.ts +0 -1
  71. package/dist/types/src/components/divider/Divider.d.ts +11 -0
  72. package/dist/types/src/components/divider/index.d.ts +2 -0
  73. package/dist/types/src/components/empty-state/EmptyState.d.ts +14 -0
  74. package/dist/types/src/components/empty-state/index.d.ts +2 -0
  75. package/dist/types/src/components/featured-icon/FeaturedIcon.d.ts +14 -0
  76. package/dist/types/src/components/featured-icon/index.d.ts +2 -0
  77. package/dist/types/src/components/index.d.ts +8 -1
  78. package/dist/types/src/components/input/InputBase.d.ts +2 -0
  79. package/dist/types/src/components/modal/Modal.d.ts +75 -0
  80. package/dist/types/src/components/modal/index.d.ts +3 -0
  81. package/dist/types/src/components/notification/FloatingNotification.d.ts +32 -0
  82. package/dist/types/src/components/notification/FullWidthNotification.d.ts +32 -0
  83. package/dist/types/src/components/notification/Notification.d.ts +59 -0
  84. package/dist/types/src/components/notification/index.d.ts +4 -0
  85. package/dist/types/src/components/pagination/NavButton.d.ts +2 -2
  86. package/dist/types/src/components/progress-bar/ProgressBar.d.ts +7 -0
  87. package/dist/types/src/components/progress-bar/index.d.ts +2 -0
  88. package/dist/types/src/components/progress-circle/ProgressCircle.d.ts +8 -0
  89. package/dist/types/src/components/progress-circle/index.d.ts +2 -0
  90. package/dist/types/src/components/slider/Slider.d.ts +15 -0
  91. package/dist/types/src/components/slider/index.d.ts +2 -0
  92. package/dist/types/src/components/tab/HorizontalTab.d.ts +12 -0
  93. package/dist/types/src/components/tab/TabButton.d.ts +26 -0
  94. package/dist/types/src/components/tab/VerticalTab.d.ts +10 -0
  95. package/dist/types/src/components/tab/index.d.ts +4 -0
  96. package/dist/ui-admin/assets/styles/style.css +1290 -105
  97. package/package.json +1 -1
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.FullWidthNotification = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
9
+ var _classnames = _interopRequireDefault(require("classnames"));
10
+ var _react = require("react");
11
+ var _color = require("../../../constant/color");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ var __assign = void 0 && (void 0).__assign || function () {
14
+ __assign = Object.assign || function (t) {
15
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
16
+ s = arguments[i];
17
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
18
+ }
19
+ return t;
20
+ };
21
+ return __assign.apply(this, arguments);
22
+ };
23
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
24
+ var t = {};
25
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
26
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
28
+ }
29
+ return t;
30
+ };
31
+ var iconNameMap = {
32
+ neutral: 'message-chat-square',
33
+ error: 'alert-triangle',
34
+ warning: 'alert-triangle',
35
+ success: 'check-circle'
36
+ };
37
+ var iconColorMap = {
38
+ neutral: 'gray700',
39
+ error: 'red500',
40
+ warning: 'orange500',
41
+ success: 'green600'
42
+ };
43
+ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
44
+ var title = _a.title,
45
+ supportingText = _a.supportingText,
46
+ _b = _a.variant,
47
+ variant = _b === void 0 ? 'neutral' : _b,
48
+ onClose = _a.onClose,
49
+ className = _a.className,
50
+ actions = _a.actions,
51
+ rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
52
+ var closeIconSize = {
53
+ width: 20,
54
+ height: 20
55
+ };
56
+ return (0, _jsxRuntime.jsx)("div", __assign({
57
+ ref: ref,
58
+ className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
59
+ role: "alert"
60
+ }, rest, {
61
+ children: (0, _jsxRuntime.jsx)("div", __assign({
62
+ className: "ncua-full-width-notification__container"
63
+ }, {
64
+ children: (0, _jsxRuntime.jsxs)("div", __assign({
65
+ className: "ncua-full-width-notification__content"
66
+ }, {
67
+ children: [(0, _jsxRuntime.jsxs)("div", __assign({
68
+ className: "ncua-full-width-notification__content-wrapper"
69
+ }, {
70
+ children: [(0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
71
+ name: iconNameMap[variant],
72
+ width: 16,
73
+ height: 16,
74
+ color: _color.COLOR[iconColorMap[variant]],
75
+ className: "ncua-full-width-notification__icon"
76
+ }), (0, _jsxRuntime.jsxs)("div", __assign({
77
+ className: "ncua-full-width-notification__text-container"
78
+ }, {
79
+ children: [(0, _jsxRuntime.jsx)("span", __assign({
80
+ className: "ncua-full-width-notification__title"
81
+ }, {
82
+ children: title
83
+ })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
84
+ className: "ncua-full-width-notification__supporting-text"
85
+ }, {
86
+ children: supportingText
87
+ }))]
88
+ }))]
89
+ })), (0, _jsxRuntime.jsxs)("div", __assign({
90
+ className: "ncua-full-width-notification__actions-container"
91
+ }, {
92
+ children: [actions && (0, _jsxRuntime.jsx)("div", __assign({
93
+ className: "ncua-full-width-notification__actions"
94
+ }, {
95
+ children: actions
96
+ })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
97
+ type: "button",
98
+ className: "ncua-full-width-notification__close-button",
99
+ onClick: onClose,
100
+ "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
101
+ }, {
102
+ children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, __assign({
103
+ name: "x-close"
104
+ }, closeIconSize, {
105
+ color: _color.COLOR[iconColorMap[variant]]
106
+ }))
107
+ }))]
108
+ }))]
109
+ }))
110
+ }))
111
+ }));
112
+ });
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Notification = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _react = require("react");
9
+ var _classnames = _interopRequireDefault(require("classnames"));
10
+ var _FloatingNotification = require("./FloatingNotification");
11
+ var _FullWidthNotification = require("./FullWidthNotification");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ var __assign = void 0 && (void 0).__assign || function () {
14
+ __assign = Object.assign || function (t) {
15
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
16
+ s = arguments[i];
17
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
18
+ }
19
+ return t;
20
+ };
21
+ return __assign.apply(this, arguments);
22
+ };
23
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
24
+ var t = {};
25
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
26
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
28
+ }
29
+ return t;
30
+ };
31
+ var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
32
+ var _b = _a.type,
33
+ type = _b === void 0 ? 'floating' : _b,
34
+ title = _a.title,
35
+ supportingText = _a.supportingText,
36
+ _c = _a.variant,
37
+ variant = _c === void 0 ? 'neutral' : _c,
38
+ onClose = _a.onClose,
39
+ className = _a.className,
40
+ actions = _a.actions,
41
+ rest = __rest(_a, ["type", "title", "supportingText", "variant", "onClose", "className", "actions"]);
42
+ var actionsContent = actions && actions.length > 0 ? (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
43
+ children: actions.map(function (action, index) {
44
+ return (0, _jsxRuntime.jsx)("button", __assign({
45
+ onClick: action.onClick,
46
+ className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link-gray'))
47
+ }, {
48
+ children: action.label
49
+ }), index);
50
+ })
51
+ }) : null;
52
+ var sharedProps = __assign({
53
+ title: title,
54
+ supportingText: supportingText,
55
+ variant: variant,
56
+ onClose: onClose,
57
+ className: className,
58
+ actions: actionsContent
59
+ }, rest);
60
+ return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({}, sharedProps, {
61
+ ref: ref
62
+ })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({}, sharedProps, {
63
+ ref: ref
64
+ }));
65
+ });
66
+ Notification.displayName = 'Notification';
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _Notification = require("./Notification");
7
+ Object.keys(_Notification).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _Notification[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _Notification[key];
14
+ }
15
+ });
16
+ });
17
+ var _FloatingNotification = require("./FloatingNotification");
18
+ Object.keys(_FloatingNotification).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _FloatingNotification[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _FloatingNotification[key];
25
+ }
26
+ });
27
+ });
28
+ var _FullWidthNotification = require("./FullWidthNotification");
29
+ Object.keys(_FullWidthNotification).forEach(function (key) {
30
+ if (key === "default" || key === "__esModule") return;
31
+ if (key in exports && exports[key] === _FullWidthNotification[key]) return;
32
+ Object.defineProperty(exports, key, {
33
+ enumerable: true,
34
+ get: function () {
35
+ return _FullWidthNotification[key];
36
+ }
37
+ });
38
+ });
@@ -49,7 +49,7 @@ var NAV_BUTTON_CONFIG = {
49
49
  var NavButton = function (_a) {
50
50
  var type = _a.type,
51
51
  as = _a.as,
52
- isPC = _a.isPC,
52
+ breakPoint = _a.breakPoint,
53
53
  noPrev = _a.noPrev,
54
54
  noNext = _a.noNext,
55
55
  href = _a.href,
@@ -60,6 +60,7 @@ var NavButton = function (_a) {
60
60
  var isFirstOrPrev = type === 'first' || type === 'prev';
61
61
  var isNextOrLast = type === 'next' || type === 'last';
62
62
  var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
63
+ var isPC = breakPoint === 'pc';
63
64
  // key를 제외한 공통 props
64
65
  var buttonProps = {
65
66
  label: config.label,
@@ -68,15 +69,16 @@ var NavButton = function (_a) {
68
69
  leadingIcon: {
69
70
  type: 'icon',
70
71
  icon: config.getIcon(isPC),
71
- color: disabled ? 'gray200' : 'gray700'
72
+ color: disabled ? 'gray200' : 'gray700',
73
+ size: isPC ? 16 : 20
72
74
  },
73
75
  hierarchy: 'secondary-gray',
74
- size: 'xs',
76
+ size: isPC ? 'xs' : 'sm',
75
77
  disabled: disabled,
76
78
  onClick: onClick
77
79
  };
78
80
  // key 값 별도 계산
79
- var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
81
+ var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
80
82
  if (as === 'a') {
81
83
  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
82
84
  as: "a",
@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _classnames = _interopRequireDefault(require("classnames"));
9
9
  var _lodashEs = require("lodash-es");
10
10
  var _react = require("react");
11
- var _constant = require("../../constant");
12
11
  var _NavButton = require("./NavButton");
13
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
13
  var __assign = void 0 && (void 0).__assign || function () {
@@ -49,9 +48,6 @@ var Pagination = function (_a) {
49
48
  var _g = (0, _react.useState)(1),
50
49
  start = _g[0],
51
50
  setStart = _g[1];
52
- var _h = (0, _react.useState)(globalThis.innerWidth > _constant.MINIMUM_PC_SIZE),
53
- isPC = _h[0],
54
- setIsPC = _h[1];
55
51
  var noPrev = start === 1;
56
52
  var noNext = start + pageCount - 1 >= totalPage;
57
53
  var showJumpPageButton = totalPage > pageCount;
@@ -79,17 +75,6 @@ var Pagination = function (_a) {
79
75
  setStart(lastGroupStart);
80
76
  }
81
77
  }, [currentPage]);
82
- (0, _react.useEffect)(function () {
83
- var mql = globalThis.matchMedia("(min-width: ".concat(_constant.MINIMUM_PC_SIZE, "px)"));
84
- setIsPC(mql.matches);
85
- var handleResize = function (e) {
86
- setIsPC(e.matches);
87
- };
88
- mql.addEventListener('change', handleResize);
89
- return function () {
90
- return mql.removeEventListener('change', handleResize);
91
- };
92
- }, []);
93
78
  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
94
79
  children: (0, _jsxRuntime.jsxs)("div", __assign({
95
80
  className: (0, _classnames.default)('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
@@ -98,7 +83,7 @@ var Pagination = function (_a) {
98
83
  children: [(0, _NavButton.NavButton)({
99
84
  type: 'first',
100
85
  as: as,
101
- isPC: isPC,
86
+ breakPoint: breakPoint,
102
87
  noPrev: noPrev,
103
88
  noNext: noNext,
104
89
  href: restProps.href || '',
@@ -109,7 +94,7 @@ var Pagination = function (_a) {
109
94
  }), (0, _NavButton.NavButton)({
110
95
  type: 'prev',
111
96
  as: as,
112
- isPC: isPC,
97
+ breakPoint: breakPoint,
113
98
  noPrev: noPrev,
114
99
  noNext: noNext,
115
100
  href: restProps.href || '',
@@ -149,7 +134,7 @@ var Pagination = function (_a) {
149
134
  children: [(0, _NavButton.NavButton)({
150
135
  type: 'next',
151
136
  as: as,
152
- isPC: isPC,
137
+ breakPoint: breakPoint,
153
138
  noPrev: noPrev,
154
139
  noNext: noNext,
155
140
  href: restProps.href || '',
@@ -160,7 +145,7 @@ var Pagination = function (_a) {
160
145
  }), (0, _NavButton.NavButton)({
161
146
  type: 'last',
162
147
  as: as,
163
- isPC: isPC,
148
+ breakPoint: breakPoint,
164
149
  noPrev: noPrev,
165
150
  noNext: noNext,
166
151
  href: restProps.href || '',
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ProgressBar = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var __assign = void 0 && (void 0).__assign || function () {
9
+ __assign = Object.assign || function (t) {
10
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
11
+ s = arguments[i];
12
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
13
+ }
14
+ return t;
15
+ };
16
+ return __assign.apply(this, arguments);
17
+ };
18
+ var ProgressBar = function (_a) {
19
+ var label = _a.label,
20
+ value = _a.value;
21
+ var limitedValue = Math.min(Math.max(0, value), 100);
22
+ var displayValue = "".concat(limitedValue.toFixed(0), "%");
23
+ var progressValueStyle = label === 'top-float' || label === 'bottom-float' ? {
24
+ '--progress-value': "".concat(limitedValue, "%")
25
+ } : undefined;
26
+ var renderLabel = function (labelType) {
27
+ return (0, _jsxRuntime.jsx)("span", __assign({
28
+ className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
29
+ }, {
30
+ children: displayValue
31
+ }));
32
+ };
33
+ var isFloatingLabel = label === 'top-float' || label === 'bottom-float';
34
+ return (0, _jsxRuntime.jsxs)("div", __assign({
35
+ className: "ncua-progress-bar ncua-progress-bar-".concat(label),
36
+ style: progressValueStyle
37
+ }, {
38
+ children: [isFloatingLabel && renderLabel(label), (0, _jsxRuntime.jsxs)("div", __assign({
39
+ className: "ncua-progress-bar__content"
40
+ }, {
41
+ children: [(0, _jsxRuntime.jsx)("div", __assign({
42
+ className: "ncua-progress-bar__bar"
43
+ }, {
44
+ children: (0, _jsxRuntime.jsx)("div", {
45
+ className: "ncua-progress-bar__fill",
46
+ style: {
47
+ width: "".concat(limitedValue, "%")
48
+ },
49
+ "aria-valuenow": limitedValue,
50
+ "aria-valuemin": 0,
51
+ "aria-valuemax": 100
52
+ })
53
+ })), label === 'right' && renderLabel('right')]
54
+ })), label === 'bottom' && renderLabel('bottom')]
55
+ }));
56
+ };
57
+ exports.ProgressBar = ProgressBar;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _ProgressBar = require("./ProgressBar");
7
+ Object.keys(_ProgressBar).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ProgressBar[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ProgressBar[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ProgressCircle = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var __assign = void 0 && (void 0).__assign || function () {
9
+ __assign = Object.assign || function (t) {
10
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
11
+ s = arguments[i];
12
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
13
+ }
14
+ return t;
15
+ };
16
+ return __assign.apply(this, arguments);
17
+ };
18
+ var ProgressCircle = function (_a) {
19
+ var size = _a.size,
20
+ label = _a.label,
21
+ value = _a.value,
22
+ _b = _a.theme,
23
+ theme = _b === void 0 ? 'circle' : _b;
24
+ var limitedValue = Math.min(Math.max(0, value), 100);
25
+ if (theme === 'circle') {
26
+ return (0, _jsxRuntime.jsxs)("div", __assign({
27
+ className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
28
+ }, {
29
+ children: [(0, _jsxRuntime.jsxs)("div", __assign({
30
+ className: "ncua-progress-circle__content"
31
+ }, {
32
+ children: [(0, _jsxRuntime.jsxs)("svg", __assign({
33
+ className: "ncua-progress-circle__svg",
34
+ viewBox: "0 0 100 100"
35
+ }, {
36
+ children: [(0, _jsxRuntime.jsx)("circle", {
37
+ className: "ncua-progress-circle__background",
38
+ cx: "50",
39
+ cy: "50",
40
+ r: "45",
41
+ strokeWidth: "10",
42
+ fill: "none"
43
+ }), (0, _jsxRuntime.jsx)("circle", {
44
+ className: "ncua-progress-circle__progress",
45
+ cx: "50",
46
+ cy: "50",
47
+ r: "45",
48
+ strokeWidth: "10",
49
+ fill: "none",
50
+ strokeDasharray: "var(--circle-circumference)",
51
+ strokeDashoffset: "calc(var(--circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
52
+ transform: "rotate(-90 50 50)",
53
+ strokeLinecap: "round"
54
+ })]
55
+ })), (0, _jsxRuntime.jsxs)("div", __assign({
56
+ className: "ncua-progress-circle__label-container"
57
+ }, {
58
+ children: [size !== 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
59
+ className: "ncua-progress-circle__label-text"
60
+ }, {
61
+ children: label
62
+ })), (0, _jsxRuntime.jsx)("div", __assign({
63
+ className: "ncua-progress-circle__label"
64
+ }, {
65
+ children: "".concat(limitedValue, "%")
66
+ }))]
67
+ }))]
68
+ })), size === 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
69
+ className: "ncua-progress-circle__outside-label"
70
+ }, {
71
+ children: label
72
+ }))]
73
+ }));
74
+ } else {
75
+ return (0, _jsxRuntime.jsxs)("div", __assign({
76
+ className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
77
+ }, {
78
+ children: [(0, _jsxRuntime.jsxs)("div", __assign({
79
+ className: "ncua-progress-circle__content"
80
+ }, {
81
+ children: [(0, _jsxRuntime.jsxs)("svg", __assign({
82
+ className: "ncua-progress-circle__svg",
83
+ viewBox: "0 0 100 50"
84
+ }, {
85
+ children: [(0, _jsxRuntime.jsx)("path", {
86
+ className: "ncua-progress-circle__background",
87
+ d: "M 5 50 A 45 45 0 0 1 95 50",
88
+ strokeWidth: "10",
89
+ fill: "none",
90
+ strokeLinecap: "round"
91
+ }), (0, _jsxRuntime.jsx)("path", {
92
+ className: "ncua-progress-circle__progress",
93
+ d: "M 5 50 A 45 45 0 0 1 95 50",
94
+ strokeWidth: "10",
95
+ fill: "none",
96
+ strokeDasharray: "var(--half-circle-circumference)",
97
+ strokeDashoffset: "calc(var(--half-circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
98
+ strokeLinecap: "round"
99
+ })]
100
+ })), (0, _jsxRuntime.jsxs)("div", __assign({
101
+ className: "ncua-progress-circle__label-container"
102
+ }, {
103
+ children: [size !== 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
104
+ className: "ncua-progress-circle__label-text"
105
+ }, {
106
+ children: label
107
+ })), (0, _jsxRuntime.jsx)("div", __assign({
108
+ className: "ncua-progress-circle__label"
109
+ }, {
110
+ children: "".concat(limitedValue, "%")
111
+ }))]
112
+ }))]
113
+ })), size === 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
114
+ className: "ncua-progress-circle__outside-label"
115
+ }, {
116
+ children: label
117
+ }))]
118
+ }));
119
+ }
120
+ };
121
+ exports.ProgressCircle = ProgressCircle;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _ProgressCircle = require("./ProgressCircle");
7
+ Object.keys(_ProgressCircle).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _ProgressCircle[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _ProgressCircle[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Slider = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _react = require("react");
9
+ var _slider = require("../../../assets/scripts/slider");
10
+ var Slider = function (_a) {
11
+ var _b = _a.min,
12
+ min = _b === void 0 ? 0 : _b,
13
+ _c = _a.max,
14
+ max = _c === void 0 ? 100 : _c,
15
+ _d = _a.step,
16
+ step = _d === void 0 ? 1 : _d,
17
+ _e = _a.value,
18
+ value = _e === void 0 ? 0 : _e,
19
+ onChange = _a.onChange,
20
+ labelPosition = _a.labelPosition,
21
+ _f = _a.disabled,
22
+ disabled = _f === void 0 ? false : _f,
23
+ className = _a.className;
24
+ var containerRef = (0, _react.useRef)(null);
25
+ var sliderInstanceRef = (0, _react.useRef)(null);
26
+ (0, _react.useEffect)(function () {
27
+ if (!containerRef.current) return;
28
+ sliderInstanceRef.current = new _slider.Slider(containerRef.current, {
29
+ min: min,
30
+ max: max,
31
+ step: step,
32
+ value: value,
33
+ onChange: onChange,
34
+ labelPosition: labelPosition,
35
+ disabled: disabled
36
+ });
37
+ return function () {
38
+ if (sliderInstanceRef.current) {
39
+ sliderInstanceRef.current.destroy();
40
+ sliderInstanceRef.current = null;
41
+ }
42
+ };
43
+ }, [typeof value, onChange, min, max, step, labelPosition]);
44
+ (0, _react.useEffect)(function () {
45
+ if (sliderInstanceRef.current) {
46
+ sliderInstanceRef.current.setValue(value);
47
+ }
48
+ }, [sliderInstanceRef, value]);
49
+ (0, _react.useEffect)(function () {
50
+ if (sliderInstanceRef.current) {
51
+ if (disabled) {
52
+ sliderInstanceRef.current.disable();
53
+ } else {
54
+ sliderInstanceRef.current.enable();
55
+ }
56
+ }
57
+ }, [disabled]);
58
+ return (0, _jsxRuntime.jsx)("div", {
59
+ ref: containerRef,
60
+ className: "ncua-slider ".concat(className || '')
61
+ });
62
+ };
63
+ exports.Slider = Slider;
64
+ var _default = exports.default = Slider;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _Slider = require("./Slider");
7
+ Object.keys(_Slider).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _Slider[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _Slider[key];
14
+ }
15
+ });
16
+ });