wini-web-components 1.9.6 → 1.9.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 (11) hide show
  1. package/dist/component/calendar/calendar.js +10 -10
  2. package/dist/component/checkbox/checkbox.js +1 -1
  3. package/dist/component/date-picker/date-picker.js +1 -1
  4. package/dist/component/import-file/import-file.d.ts +0 -1
  5. package/dist/component/import-file/import-file.js +32 -27
  6. package/dist/component/input-multi-select/input-multi-select.js +2 -2
  7. package/dist/component/select1/select1.js +2 -2
  8. package/dist/component/text/text.d.ts +1 -0
  9. package/dist/component/text/text.js +3 -2
  10. package/dist/index.js +1 -1
  11. package/package.json +1 -1
package/dist/component/calendar/calendar.js CHANGED
@@ -120,7 +120,7 @@ var Calendar = /** @class */ (function (_super) {
120
120
  else if (timeValue.getMonth() !== _this.state.selectMonth) {
121
121
  style = __assign(__assign({}, style), { color: 'var(--neutral-text-subtitle-color)' });
122
122
  }
123
- return react_1.default.createElement("button", __assign({ type: "button", key: timeValue.toString(), className: "".concat(calendar_module_css_1.default['date-picker-circle'], " body-3 ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
123
+ return react_1.default.createElement("button", __assign({ type: "button", key: timeValue.toString(), className: "".concat(calendar_module_css_1.default['date-picker-circle'], " date-picker-circle body-3 ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
124
124
  _this.setState(__assign(__assign({}, _this.state), { value: timeValue }));
125
125
  if (_this.props.onSelect)
126
126
  _this.props.onSelect(timeValue);
@@ -193,7 +193,7 @@ var Calendar = /** @class */ (function (_super) {
193
193
  if (_this.state.selectYear === _this.state.value.getFullYear() && i === _this.state.value.getMonth()) {
194
194
  selected = true;
195
195
  }
196
- return react_1.default.createElement("button", __assign({ type: "button", key: timeValue.toString(), className: "".concat(calendar_module_css_1.default['month-picker-circle'], " body-3 row ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
196
+ return react_1.default.createElement("button", __assign({ type: "button", key: timeValue.toString(), className: "".concat(calendar_module_css_1.default['month-picker-circle'], " month-picker-circle body-3 row ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
197
197
  if (_this.props.type === CalendarType.MONTH) {
198
198
  _this.setState(__assign(__assign({}, _this.state), { value: timeValue }));
199
199
  if (_this.props.onSelect)
@@ -223,7 +223,7 @@ var Calendar = /** @class */ (function (_super) {
223
223
  if (yearNumber === _this.state.value.getFullYear()) {
224
224
  selected = true;
225
225
  }
226
- return react_1.default.createElement("button", __assign({ type: "button", key: yearNumber.toString(), className: "".concat(calendar_module_css_1.default['year-picker-circle'], " body-3 row ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
226
+ return react_1.default.createElement("button", __assign({ type: "button", key: yearNumber.toString(), className: "".concat(calendar_module_css_1.default['year-picker-circle'], " year-picker-circle body-3 row ").concat(selected ? calendar_module_css_1.default['selected'] : ''), style: style }, additionProps, { onClick: function () {
227
227
  if (_this.props.type === CalendarType.YEAR) {
228
228
  _this.setState(__assign(__assign({}, _this.state), { value: new Date(yearNumber) }));
229
229
  if (_this.props.onSelect)
@@ -322,7 +322,7 @@ var Calendar = /** @class */ (function (_super) {
322
322
  break;
323
323
  }
324
324
  } },
325
- react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-left", size: '1.6rem' })),
325
+ react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-left", size: '1.4rem' })),
326
326
  react_1.default.createElement("button", { type: 'button', onClick: function () {
327
327
  switch (_this.state.type) {
328
328
  case CalendarType.YEAR:
@@ -344,7 +344,7 @@ var Calendar = /** @class */ (function (_super) {
344
344
  break;
345
345
  }
346
346
  } },
347
- react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: '1.6rem' })),
347
+ react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: '1.4rem' })),
348
348
  react_1.default.createElement("span", { className: "heading-7", onClick: function () {
349
349
  if (_this.state.type !== CalendarType.YEAR)
350
350
  _this.setState(__assign(__assign({}, _this.state), { type: _this.state.type === CalendarType.DATE ? CalendarType.MONTH : CalendarType.YEAR }));
@@ -370,7 +370,7 @@ var Calendar = /** @class */ (function (_super) {
370
370
  break;
371
371
  }
372
372
  } },
373
- react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-right", size: '1.6rem' })),
373
+ react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: '1.4rem' })),
374
374
  react_1.default.createElement("button", { type: 'button', onClick: function () {
375
375
  switch (_this.state.type) {
376
376
  case CalendarType.YEAR:
@@ -394,7 +394,7 @@ var Calendar = /** @class */ (function (_super) {
394
394
  break;
395
395
  }
396
396
  } },
397
- react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: '1.6rem' }))),
397
+ react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/double-arrow-right", size: '1.4rem' }))),
398
398
  react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['picker-date-body'], " row") }, this.state.type === CalendarType.YEAR ? this.showYearInRange() : this.state.type === CalendarType.MONTH ? this.showMonthInYear() : this.showDateInMonth())),
399
399
  this.props.type === CalendarType.DATETIME ? react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['picker-time-container'], " col") },
400
400
  react_1.default.createElement("div", { className: "heading-7" },
@@ -404,21 +404,21 @@ var Calendar = /** @class */ (function (_super) {
404
404
  ":",
405
405
  this.state.selectSeconds < 10 ? "0".concat(this.state.selectSeconds) : this.state.selectSeconds),
406
406
  react_1.default.createElement("div", { className: "row", style: { alignItems: 'start', flex: 1, height: '100%' } },
407
- react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-hours'], " col") }, Array.from({ length: 24 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
407
+ react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-hours'], " scroll-picker-hours col") }, Array.from({ length: 24 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
408
408
  var newValue = _this.state.value;
409
409
  newValue.setHours(i);
410
410
  _this.setState(__assign(__assign({}, _this.state), { selectHours: i, value: newValue }));
411
411
  if (_this.props.onSelect)
412
412
  _this.props.onSelect(newValue);
413
413
  }, key: "hours-".concat(i), className: "label-4 ".concat(_this.state.selectHours === (i) ? calendar_module_css_1.default['selected'] : '') }, i < 10 ? "0".concat(i) : i); })),
414
- react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-minutes'], " col") }, Array.from({ length: 60 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
414
+ react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-minutes'], " scroll-picker-minutes col") }, Array.from({ length: 60 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
415
415
  var newValue = _this.state.value;
416
416
  newValue.setMinutes(i);
417
417
  _this.setState(__assign(__assign({}, _this.state), { selectMinutes: i, value: newValue }));
418
418
  if (_this.props.onSelect)
419
419
  _this.props.onSelect(newValue);
420
420
  }, key: "hours-".concat(i), className: "label-4 ".concat(_this.state.selectMinutes === (i) ? calendar_module_css_1.default['selected'] : '') }, i < 10 ? "0".concat(i) : i); })),
421
- react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-seconds'], " col") }, Array.from({ length: 60 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
421
+ react_1.default.createElement("div", { className: "".concat(calendar_module_css_1.default['scroll-picker-seconds'], " scroll-picker-seconds col") }, Array.from({ length: 60 }).map(function (_, i) { return react_1.default.createElement("button", { type: "button", onClick: function () {
422
422
  var newValue = _this.state.value;
423
423
  newValue.setSeconds(i);
424
424
  _this.setState(__assign(__assign({}, _this.state), { selectSeconds: i, value: newValue }));
package/dist/component/checkbox/checkbox.js CHANGED
@@ -72,7 +72,7 @@ var Checkbox = /** @class */ (function (_super) {
72
72
  if (_this.props.onChange)
73
73
  _this.props.onChange(newValue);
74
74
  } }),
75
- react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { '--check-color': this.props.checkColor } }, this.state.value == undefined ?
75
+ react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { '--check-color': this.props.checkColor } }, this.state.value === undefined ?
76
76
  react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.79199 9.95298C4.79199 9.69148 5.00398 9.47949 5.26548 9.47949H14.7352C14.9967 9.47949 15.2087 9.69148 15.2087 9.95298C15.2087 10.2145 14.9967 10.4265 14.7352 10.4265H5.26548C5.00398 10.4265 4.79199 10.2145 4.79199 9.95298Z" }) :
77
77
  react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.07 6.49317C15.2549 6.67808 15.2549 6.97787 15.07 7.16278L8.91467 13.3181C8.72977 13.503 8.42997 13.503 8.24507 13.3181L4.93067 10.0037C4.74577 9.81878 4.74577 9.51899 4.93067 9.33408C5.11558 9.14917 5.41537 9.14917 5.60028 9.33408L8.57987 12.3137L14.4004 6.49317C14.5853 6.30827 14.8851 6.30827 15.07 6.49317Z" })));
78
78
  };
package/dist/component/date-picker/date-picker.js CHANGED
@@ -351,7 +351,7 @@ var DatePicker = /** @class */ (function (_super) {
351
351
  if (_this.props.onChange)
352
352
  _this.props.onChange(_this.state.value);
353
353
  } },
354
- react_1.default.createElement("div", { className: 'button-text-3' }, "Submit"))) : null) })), document.body));
354
+ react_1.default.createElement("div", { className: 'button-text-3' }, "Apply"))) : null) })), document.body));
355
355
  };
356
356
  return DatePicker;
357
357
  }(react_1.default.Component));
package/dist/component/import-file/import-file.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { CSSProperties } from 'react';
2
- import './import-file.css';
3
2
  import { ComponentStatus } from '../component-status';
4
3
  interface ObjWithKnownKeys {
5
4
  [k: string]: any;
package/dist/component/import-file/import-file.js CHANGED
@@ -31,19 +31,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
31
31
  Object.defineProperty(exports, "__esModule", { value: true });
32
32
  exports.ImportFile = void 0;
33
33
  var react_1 = __importDefault(require("react"));
34
- require("./import-file.css");
34
+ var import_file_module_css_1 = __importDefault(require("./import-file.module.css"));
35
35
  var index_1 = require("../../index");
36
36
  var cloudSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '3rem', height: '3rem' }, viewBox: '0 0 36 36', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
37
- react_1.default.createElement("path", { d: 'M22.5312 6.51941C20.3258 6.12929 18.0555 6.35518 15.9702 7.1722C13.8849 7.98923 12.0654 9.36573 10.712 11.1502C9.53042 12.7081 8.74407 14.5243 8.41412 16.4432C6.99557 16.9154 5.7486 17.8144 4.85059 19.0274C3.77621 20.4786 3.27749 22.2764 3.45068 24.0737C3.62388 25.871 4.45672 27.5405 5.78845 28.7599C7.12018 29.9792 8.85639 30.6621 10.662 30.6766H13.1063C13.7786 30.6766 14.3236 30.1316 14.3236 29.4594C14.3236 28.7871 13.7786 28.2421 13.1063 28.2421H10.6769C9.47485 28.2313 8.31921 27.7762 7.43253 26.9643C6.54471 26.1514 5.98948 25.0384 5.87402 23.8402C5.75855 22.642 6.09103 21.4435 6.80729 20.476C7.52354 19.5085 8.57279 18.8406 9.75252 18.6013C10.2753 18.4952 10.6682 18.061 10.7216 17.5303C10.9012 15.7476 11.5691 14.049 12.6518 12.6214C13.7345 11.1938 15.1901 10.0926 16.8583 9.43899C18.5266 8.78536 20.3428 8.60466 22.1071 8.91675C23.8715 9.22884 25.5155 10.0216 26.8583 11.2079C28.2011 12.3941 29.1905 13.9278 29.7178 15.6402C30.2451 17.3526 30.2898 19.1772 29.8469 20.9134C29.404 22.6495 28.4907 24.2297 27.2075 25.4802C25.9244 26.7308 24.3211 27.603 22.5742 28.001C21.9187 28.1504 21.5084 28.8028 21.6577 29.4583C21.807 30.1138 22.4595 30.5241 23.115 30.3748C25.2987 29.8772 27.3028 28.7869 28.9067 27.2238C30.5107 25.6606 31.6523 23.6853 32.2059 21.5152C32.7595 19.345 32.7037 17.0642 32.0446 14.9237C31.3855 12.7833 30.1486 10.8661 28.4701 9.38333C26.7916 7.90052 24.7366 6.90953 22.5312 6.51941Z', fill: '#366AE2' }),
38
- react_1.default.createElement("path", { d: 'M17.1146 17.6431C17.2313 17.5264 17.3658 17.4384 17.5094 17.379C17.6513 17.3201 17.8067 17.2874 17.9697 17.2866L17.9753 17.2866L17.9809 17.2866C18.2906 17.288 18.5998 17.4069 18.8361 17.6431L23.7052 22.5123C24.1806 22.9876 24.1806 23.7584 23.7052 24.2338C23.2298 24.7091 22.4591 24.7091 21.9837 24.2338L19.1926 21.4427V29.4594C19.1926 30.1317 18.6476 30.6767 17.9753 30.6767C17.303 30.6767 16.758 30.1317 16.758 29.4594V21.4427L13.9669 24.2338C13.4916 24.7091 12.7208 24.7091 12.2455 24.2338C11.7701 23.7584 11.7701 22.9876 12.2455 22.5123L17.1146 17.6431Z', fill: '#366AE2' })));
39
- var fileSvg = (react_1.default.createElement("svg", { className: 'preview-icon', width: '100%', height: '100%', style: { width: '3rem', height: '3rem' }, viewBox: '0 0 36 36', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
40
- react_1.default.createElement("path", { d: 'M20.9163 3.41669H7.54829C7.22597 3.41669 6.91686 3.54472 6.68895 3.77263C6.46105 4.00054 6.33301 4.30965 6.33301 4.63196V31.3681C6.33301 31.6904 6.46105 31.9995 6.68895 32.2274C6.91686 32.4553 7.22597 32.5834 7.54829 32.5834H29.4233C29.7456 32.5834 30.0547 32.4553 30.2826 32.2274C30.5105 31.9995 30.6386 31.6904 30.6386 31.3681V13.1389H22.1316C21.8093 13.1389 21.5002 13.0109 21.2723 12.783C21.0444 12.5551 20.9163 12.2459 20.9163 11.9236V3.41669Z', fill: '#366AE2' }),
41
- react_1.default.createElement("path", { d: 'M29.9264 10.7084H23.3469V4.12884L29.9264 10.7084Z', fill: '#366AE2' })));
37
+ react_1.default.createElement("path", { d: 'M22.5312 6.51941C20.3258 6.12929 18.0555 6.35518 15.9702 7.1722C13.8849 7.98923 12.0654 9.36573 10.712 11.1502C9.53042 12.7081 8.74407 14.5243 8.41412 16.4432C6.99557 16.9154 5.7486 17.8144 4.85059 19.0274C3.77621 20.4786 3.27749 22.2764 3.45068 24.0737C3.62388 25.871 4.45672 27.5405 5.78845 28.7599C7.12018 29.9792 8.85639 30.6621 10.662 30.6766H13.1063C13.7786 30.6766 14.3236 30.1316 14.3236 29.4594C14.3236 28.7871 13.7786 28.2421 13.1063 28.2421H10.6769C9.47485 28.2313 8.31921 27.7762 7.43253 26.9643C6.54471 26.1514 5.98948 25.0384 5.87402 23.8402C5.75855 22.642 6.09103 21.4435 6.80729 20.476C7.52354 19.5085 8.57279 18.8406 9.75252 18.6013C10.2753 18.4952 10.6682 18.061 10.7216 17.5303C10.9012 15.7476 11.5691 14.049 12.6518 12.6214C13.7345 11.1938 15.1901 10.0926 16.8583 9.43899C18.5266 8.78536 20.3428 8.60466 22.1071 8.91675C23.8715 9.22884 25.5155 10.0216 26.8583 11.2079C28.2011 12.3941 29.1905 13.9278 29.7178 15.6402C30.2451 17.3526 30.2898 19.1772 29.8469 20.9134C29.404 22.6495 28.4907 24.2297 27.2075 25.4802C25.9244 26.7308 24.3211 27.603 22.5742 28.001C21.9187 28.1504 21.5084 28.8028 21.6577 29.4583C21.807 30.1138 22.4595 30.5241 23.115 30.3748C25.2987 29.8772 27.3028 28.7869 28.9067 27.2238C30.5107 25.6606 31.6523 23.6853 32.2059 21.5152C32.7595 19.345 32.7037 17.0642 32.0446 14.9237C31.3855 12.7833 30.1486 10.8661 28.4701 9.38333C26.7916 7.90052 24.7366 6.90953 22.5312 6.51941Z', style: { fill: "var(--primary-main-color)" } }),
38
+ react_1.default.createElement("path", { d: 'M17.1146 17.6431C17.2313 17.5264 17.3658 17.4384 17.5094 17.379C17.6513 17.3201 17.8067 17.2874 17.9697 17.2866L17.9753 17.2866L17.9809 17.2866C18.2906 17.288 18.5998 17.4069 18.8361 17.6431L23.7052 22.5123C24.1806 22.9876 24.1806 23.7584 23.7052 24.2338C23.2298 24.7091 22.4591 24.7091 21.9837 24.2338L19.1926 21.4427V29.4594C19.1926 30.1317 18.6476 30.6767 17.9753 30.6767C17.303 30.6767 16.758 30.1317 16.758 29.4594V21.4427L13.9669 24.2338C13.4916 24.7091 12.7208 24.7091 12.2455 24.2338C11.7701 23.7584 11.7701 22.9876 12.2455 22.5123L17.1146 17.6431Z', style: { fill: "var(--primary-main-color)" } })));
39
+ var fileSvg = (react_1.default.createElement("svg", { className: import_file_module_css_1.default['preview-icon'], width: '100%', height: '100%', style: { width: '3rem', height: '3rem' }, viewBox: '0 0 36 36', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
40
+ react_1.default.createElement("path", { d: 'M20.9163 3.41669H7.54829C7.22597 3.41669 6.91686 3.54472 6.68895 3.77263C6.46105 4.00054 6.33301 4.30965 6.33301 4.63196V31.3681C6.33301 31.6904 6.46105 31.9995 6.68895 32.2274C6.91686 32.4553 7.22597 32.5834 7.54829 32.5834H29.4233C29.7456 32.5834 30.0547 32.4553 30.2826 32.2274C30.5105 31.9995 30.6386 31.6904 30.6386 31.3681V13.1389H22.1316C21.8093 13.1389 21.5002 13.0109 21.2723 12.783C21.0444 12.5551 20.9163 12.2459 20.9163 11.9236V3.41669Z', style: { fill: "var(--primary-main-color)" } }),
41
+ react_1.default.createElement("path", { d: 'M29.9264 10.7084H23.3469V4.12884L29.9264 10.7084Z', style: { fill: "var(--primary-main-color)" } })));
42
42
  var closeSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '2.4rem', height: '2.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
43
- react_1.default.createElement("path", { d: 'M13.4144 12.0002L20.4144 5.00015L19.0002 3.58594L12.0002 10.5859L5.00015 3.58594L3.58594 5.00015L10.5859 12.0002L3.58594 19.0002L5.00015 20.4144L12.0002 13.4144L19.0002 20.4144L20.4144 19.0002L13.4144 12.0002Z', fill: '#E60012FF' })));
43
+ react_1.default.createElement("path", { d: 'M13.4144 12.0002L20.4144 5.00015L19.0002 3.58594L12.0002 10.5859L5.00015 3.58594L3.58594 5.00015L10.5859 12.0002L3.58594 19.0002L5.00015 20.4144L12.0002 13.4144L19.0002 20.4144L20.4144 19.0002L13.4144 12.0002Z', style: { fill: "var(--error-main-color)" } })));
44
44
  var uploadSvg = (react_1.default.createElement("svg", { width: '100%', height: '100%', style: { width: '1.4rem', height: '1.4rem' }, fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
45
- react_1.default.createElement("path", { d: 'M3.66732 3.88889L7.00065 0L10.334 3.88889H7.55621V8.88889H6.4451V3.88889H3.66732Z', fill: '#262626' }),
46
- react_1.default.createElement("path", { d: 'M12.5562 11.1111H1.4451V7.77778H0.333984V11.6667C0.333984 11.9733 0.582873 12.2222 0.88954 12.2222H13.1118C13.4184 12.2222 13.6673 11.9733 13.6673 11.6667V7.77778H12.5562V11.1111Z', fill: '#262626' })));
45
+ react_1.default.createElement("path", { d: 'M3.66732 3.88889L7.00065 0L10.334 3.88889H7.55621V8.88889H6.4451V3.88889H3.66732Z', style: { fill: "var(--neutral-text-subtitle-color)" } }),
46
+ react_1.default.createElement("path", { d: 'M12.5562 11.1111H1.4451V7.77778H0.333984V11.6667C0.333984 11.9733 0.582873 12.2222 0.88954 12.2222H13.1118C13.4184 12.2222 13.6673 11.9733 13.6673 11.6667V7.77778H12.5562V11.1111Z', style: { fill: "var(--neutral-text-subtitle-color)" } })));
47
47
  var ImportFile = /** @class */ (function (_super) {
48
48
  __extends(ImportFile, _super);
49
49
  function ImportFile(props) {
@@ -70,7 +70,7 @@ var ImportFile = /** @class */ (function (_super) {
70
70
  if (this.props.maxSize) {
71
71
  sizeTitle = this.props.maxSize > Math.pow(1024, 3) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 3)), "TB") : this.props.maxSize > Math.pow(1024, 2) ? "".concat(Math.round(this.props.maxSize / Math.pow(1024, 2)), "GB") : this.props.maxSize > 1024 ? "".concat(Math.round(this.props.maxSize / 1024), "MB") : "".concat(this.props.maxSize, "KB");
72
72
  }
73
- return react_1.default.createElement("div", { id: this.props.id, className: "import-file-container ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'row', " ").concat(this.props.buttonOnly ? 'button-only' : ''), style: this.state.preview ? this.props.style : __assign({ cursor: 'pointer' }, this.props.style), onClick: function () {
73
+ return react_1.default.createElement("div", { id: this.props.id, className: "".concat(import_file_module_css_1.default['import-file-container'], " ").concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'row', " ").concat(this.props.buttonOnly ? import_file_module_css_1.default['button-only'] : ''), style: this.state.preview ? this.props.style : __assign({ cursor: 'pointer' }, this.props.style), onClick: function () {
74
74
  if (!_this.state.preview && !_this.props.buttonOnly)
75
75
  _this.showFilePicker();
76
76
  } },
@@ -80,7 +80,7 @@ var ImportFile = /** @class */ (function (_super) {
80
80
  file = ev.target.files[0];
81
81
  if (_this.props.maxSize) {
82
82
  if (file.size > (_this.props.maxSize * 1024)) {
83
- index_1.ToastMessage.errors("T\u1EC7p ".concat(file.name, " v\u01B0\u1EE3t qua k\u00EDch th\u01B0\u1EDBc cho ph\u00E9p"));
83
+ index_1.ToastMessage.errors("File ".concat(file.name, " exceeds the maximum size of ").concat(sizeTitle));
84
84
  file = undefined;
85
85
  }
86
86
  }
@@ -93,24 +93,29 @@ var ImportFile = /** @class */ (function (_super) {
93
93
  } }),
94
94
  this.props.buttonOnly
95
95
  ? null
96
- : [
97
- react_1.default.createElement("div", { key: 'import-file-prefix', className: 'import-file-prefix row' }, this.state.preview ? ((_c = this.state.preview.type) === null || _c === void 0 ? void 0 : _c.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview instanceof File ? URL.createObjectURL(this.state.preview) : this.state.preview.url }) : fileSvg : cloudSvg),
98
- react_1.default.createElement("div", { key: 'file-preview-content', className: 'file-preview-content col' },
99
- react_1.default.createElement(index_1.Text, { className: 'title-file heading-8', style: { maxWidth: '100%' } }, (_e = (_d = this.state.preview) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : ((_f = this.props.label) !== null && _f !== void 0 ? _f : 'Nhấp hoặc kéo tệp vào đây để tải lên')),
100
- react_1.default.createElement(index_1.Text, { className: 'subtitle-file subtitle-3', style: { maxWidth: '100%' } }, ((_g = this.state.preview) === null || _g === void 0 ? void 0 : _g.size)
96
+ : react_1.default.createElement(react_1.default.Fragment, null,
97
+ react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['import-file-prefix'], " row") }, this.state.preview ? ((_c = this.state.preview.type) === null || _c === void 0 ? void 0 : _c.includes('image')) ? react_1.default.createElement("img", { src: this.state.preview instanceof File ? URL.createObjectURL(this.state.preview) : this.state.preview.url }) : fileSvg : cloudSvg),
98
+ react_1.default.createElement("div", { className: "".concat(import_file_module_css_1.default['file-preview-content'], " col") },
99
+ react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['title-file'], " heading-8"), style: { maxWidth: '100%' } }, (_e = (_d = this.state.preview) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : ((_f = this.props.label) !== null && _f !== void 0 ? _f : 'Click or drag and drop to upload file')),
100
+ react_1.default.createElement(index_1.Text, { className: "".concat(import_file_module_css_1.default['subtitle-file'], " subtitle-3"), style: { maxWidth: '100%' } }, ((_g = this.state.preview) === null || _g === void 0 ? void 0 : _g.size)
101
101
  ? "".concat((_h = this.state.preview) === null || _h === void 0 ? void 0 : _h.size, "KB")
102
- : ((_j = this.props.subTitle) !== null && _j !== void 0 ? _j : (sizeTitle ? "K\u00EDch th\u01B0\u1EDBc t\u1EC7p nh\u1ECF h\u01A1n ".concat(sizeTitle, ".") : ''))))
103
- ],
104
- this.state.preview && this.props.buttonOnly ? (react_1.default.createElement("div", { className: 'row', style: {} },
105
- react_1.default.createElement(index_1.Text, { className: 'preview-file-link' }, (_l = (_k = this.state.preview) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : ''),
106
- react_1.default.createElement("button", { type: 'button', className: 'remove-preview-file', onClick: function () {
102
+ : ((_j = this.props.subTitle) !== null && _j !== void 0 ? _j : (sizeTitle ? "File size should not exceed ".concat(sizeTitle, ".") : ''))))),
103
+ this.state.preview && this.props.buttonOnly ? react_1.default.createElement("div", { className: 'row', style: { gap: "0.4rem" } },
104
+ react_1.default.createElement(index_1.Text, { className: 'button-text-6' }, (_l = (_k = this.state.preview) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : ''),
105
+ react_1.default.createElement("button", { type: 'button', className: "".concat(import_file_module_css_1.default['remove-preview-file']), onClick: function () {
107
106
  _this.setState(__assign(__assign({}, _this.state), { preview: null }));
108
- } }, closeSvg))) : (react_1.default.createElement("button", { type: 'button', className: 'import-file-suffix row', onClick: function () {
109
- if (_this.props.buttonOnly || _this.state.preview)
110
- _this.showFilePicker();
111
- } },
112
- this.props.buttonOnly ? uploadSvg : null,
113
- react_1.default.createElement("span", null, this.state.preview ? 'Thay tệp' : 'Chọn tệp'))));
107
+ if (_this.props.onChange)
108
+ _this.props.onChange(undefined);
109
+ } }, closeSvg))
110
+ : react_1.default.createElement(index_1.Button, { label: this.state.preview ? 'Remove file' : 'Choose file', style: { color: "var(--neutral-text-subtitle-color)" }, className: 'button-text-4', onClick: function () {
111
+ if (_this.state.preview) {
112
+ _this.setState(__assign(__assign({}, _this.state), { preview: null }));
113
+ if (_this.props.onChange)
114
+ _this.props.onChange(undefined);
115
+ }
116
+ else if (_this.props.buttonOnly || _this.state.preview)
117
+ _this.showFilePicker();
118
+ } }));
114
119
  };
115
120
  return ImportFile;
116
121
  }(react_1.default.Component));
package/dist/component/input-multi-select/input-multi-select.js CHANGED
@@ -225,7 +225,7 @@ var SelectMultiple = /** @class */ (function (_super) {
225
225
  this.setState(__assign(__assign({}, this.state), { value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [] }));
226
226
  //
227
227
  if (this.state.isOpen && (prevState.isOpen !== this.state.isOpen || prevState.value.length !== this.state.value.length)) {
228
- var thisPopupRect = (_b = document.body.querySelector(".".concat(input_multi_select_module_css_1.default['select-multi-popup']))) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
228
+ var thisPopupRect = (_b = document.body.querySelector(":scope > .select-multi-popup")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
229
229
  if (thisPopupRect) {
230
230
  var style = void 0;
231
231
  if (prevState.isOpen !== this.state.isOpen && thisPopupRect.right > document.body.offsetWidth) {
@@ -282,7 +282,7 @@ var SelectMultiple = /** @class */ (function (_super) {
282
282
  react_1.default.createElement(winicon_1.Winicon, { src: "outline/user interface/c-remove", size: '1.6rem' })) : react_1.default.createElement("div", { className: 'row', style: { display: (this.containerRef.current && this.containerRef.current.getBoundingClientRect().width >= 120) ? "flex" : "none" } },
283
283
  react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: '1.2rem' })),
284
284
  this.state.isOpen &&
285
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(input_multi_select_module_css_1.default['select-multi-popup'], " col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
285
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(input_multi_select_module_css_1.default['select-multi-popup'], " select-multi-popup col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
286
286
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
287
287
  left: this.state.offset.x + 'px',
288
288
  width: this.state.offset.width,
package/dist/component/select1/select1.js CHANGED
@@ -244,7 +244,7 @@ var Select1 = /** @class */ (function (_super) {
244
244
  this.inputRef.current.value = "".concat((_d = (_c = this.state.options.find(function (e) { return e.id === _this.state.value; })) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "");
245
245
  //
246
246
  if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
247
- var thisPopupRect = (_e = document.body.querySelector(":scope > .".concat(select1_module_css_1.default['select1-popup']))) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
247
+ var thisPopupRect = (_e = document.body.querySelector(":scope > .select1-popup")) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
248
248
  if (thisPopupRect) {
249
249
  var style = void 0;
250
250
  if (thisPopupRect.right > document.body.offsetWidth) {
@@ -298,7 +298,7 @@ var Select1 = /** @class */ (function (_super) {
298
298
  }, className: 'row' },
299
299
  react_1.default.createElement(winicon_1.Winicon, { src: this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow", size: "1.2rem" })),
300
300
  this.state.isOpen &&
301
- react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select1-popup'], " col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
301
+ react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select1-popup'], " select1-popup col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
302
302
  top: this.state.offset.y + this.state.offset.height + 2 + 'px',
303
303
  left: this.state.offset.x + 'px',
304
304
  width: this.state.offset.width,
package/dist/component/text/text.d.ts CHANGED
@@ -8,6 +8,7 @@ interface TextProps {
8
8
  maxLine?: number;
9
9
  onClick?: React.MouseEventHandler<HTMLDivElement>;
10
10
  onHover?: React.MouseEventHandler<HTMLDivElement>;
11
+ html?: string;
11
12
  }
12
13
  export declare class Text extends React.Component<TextProps> {
13
14
  render(): React.ReactNode;
package/dist/component/text/text.js CHANGED
@@ -38,12 +38,13 @@ var Text = /** @class */ (function (_super) {
38
38
  return _super !== null && _super.apply(this, arguments) || this;
39
39
  }
40
40
  Text.prototype.render = function () {
41
- var _a, _b;
41
+ var _a, _b, _c;
42
42
  var convertStyle = (_a = this.props.style) !== null && _a !== void 0 ? _a : {};
43
43
  if (this.props.maxLine) {
44
44
  convertStyle = __assign(__assign({}, convertStyle), { '--max-line': this.props.maxLine });
45
45
  }
46
- return react_1.default.createElement("div", { id: this.props.id, onMouseOver: this.props.onHover, onClick: this.props.onClick, className: "comp-text ".concat(this.props.onClick ? 'type-button' : '', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : ''), style: convertStyle }, this.props.children);
46
+ return this.props.html ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: this.props.html }, id: this.props.id, onMouseOver: this.props.onHover, onClick: this.props.onClick, className: "comp-text ".concat(this.props.onClick ? 'type-button' : '', " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : ''), style: convertStyle }) :
47
+ react_1.default.createElement("div", { id: this.props.id, onMouseOver: this.props.onHover, onClick: this.props.onClick, className: "comp-text ".concat(this.props.onClick ? 'type-button' : '', " ").concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle }, this.props.children);
47
48
  };
48
49
  return Text;
49
50
  }(react_1.default.Component));