@dktunited-techoff/techoff-suite-ui 1.5.2 → 1.5.3

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 (9) hide show
  1. package/esm/components/TsCheckbox/TsCheckbox.css +3 -14
  2. package/esm/components/TsCheckbox/TsCheckbox.js +2 -2
  3. package/esm/components/TsCheckbox/TsCheckbox.js.map +1 -1
  4. package/lib/components/TsCheckbox/TsCheckbox.css +3 -14
  5. package/lib/components/TsCheckbox/TsCheckbox.js +2 -2
  6. package/lib/components/TsCheckbox/TsCheckbox.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/TsCheckbox/TsCheckbox.css +3 -14
  9. package/src/components/TsCheckbox/TsCheckbox.tsx +2 -2
package/esm/components/TsCheckbox/TsCheckbox.css CHANGED
@@ -16,11 +16,7 @@
16
16
  }
17
17
  /* ##### */
18
18
  /* BOX */
19
- .ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
20
- background: #e1e3f5;
21
- }
22
19
  .ts-checkbox-box {
23
- position: relative;
24
20
  display: flex;
25
21
  align-items: center;
26
22
  justify-content: center;
@@ -29,17 +25,10 @@
29
25
  height: 24px;
30
26
  min-height: 24px;
31
27
  border-radius: 6px;
32
- color: #3643ba;
33
- transition: all ease 0.3s;
34
28
  }
35
- .ts-checkbox-box::before {
36
- content: '';
37
- position: absolute;
38
- width: 12px;
39
- height: 12px;
40
- border-radius: 6px;
41
- background: #ffffff;
42
- z-index: 10;
29
+ .ts-checkbox-box--checked,
30
+ .ts-checkbox:hover .ts-checkbox-box:not(.ts-checkbox-box--checked) {
31
+ color: #3643ba;
43
32
  }
44
33
  .ts-checkbox-box .ts-icon {
45
34
  z-index: 20;
package/esm/components/TsCheckbox/TsCheckbox.js CHANGED
@@ -8,8 +8,8 @@ export const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
8
8
  // #########
9
9
  // Rendering
10
10
  return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
11
- React.createElement("div", { className: "ts-checkbox-box" },
12
- React.createElement(TsIcon, { name: checked ? 'check-square-filled' : 'square' })),
11
+ React.createElement("div", { className: `ts-checkbox-box ${checked ? 'ts-checkbox-box--checked' : ''}` },
12
+ React.createElement(TsIcon, { name: checked ? 'check-square-filled' : 'square', size: "24" })),
13
13
  React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
14
14
  React.createElement("div", { className: "ts-checkbox-label" }, label),
15
15
  caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
package/esm/components/TsCheckbox/TsCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,MAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,GAAI,CACxD;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5E,oBAAC,MAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CAClE;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
package/lib/components/TsCheckbox/TsCheckbox.css CHANGED
@@ -16,11 +16,7 @@
16
16
  }
17
17
  /* ##### */
18
18
  /* BOX */
19
- .ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
20
- background: #e1e3f5;
21
- }
22
19
  .ts-checkbox-box {
23
- position: relative;
24
20
  display: flex;
25
21
  align-items: center;
26
22
  justify-content: center;
@@ -29,17 +25,10 @@
29
25
  height: 24px;
30
26
  min-height: 24px;
31
27
  border-radius: 6px;
32
- color: #3643ba;
33
- transition: all ease 0.3s;
34
28
  }
35
- .ts-checkbox-box::before {
36
- content: '';
37
- position: absolute;
38
- width: 12px;
39
- height: 12px;
40
- border-radius: 6px;
41
- background: #ffffff;
42
- z-index: 10;
29
+ .ts-checkbox-box--checked,
30
+ .ts-checkbox:hover .ts-checkbox-box:not(.ts-checkbox-box--checked) {
31
+ color: #3643ba;
43
32
  }
44
33
  .ts-checkbox-box .ts-icon {
45
34
  z-index: 20;
package/lib/components/TsCheckbox/TsCheckbox.js CHANGED
@@ -11,8 +11,8 @@ const TsCheckbox = ({ caption, label, checked, disabled, onChange }) => {
11
11
  // #########
12
12
  // Rendering
13
13
  return (React.createElement("div", { className: `ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`, onClick: handleChange },
14
- React.createElement("div", { className: "ts-checkbox-box" },
15
- React.createElement(TsIcon_1.TsIcon, { name: checked ? 'check-square-filled' : 'square' })),
14
+ React.createElement("div", { className: `ts-checkbox-box ${checked ? 'ts-checkbox-box--checked' : ''}` },
15
+ React.createElement(TsIcon_1.TsIcon, { name: checked ? 'check-square-filled' : 'square', size: "24" })),
16
16
  React.createElement("div", { className: `ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}` },
17
17
  React.createElement("div", { className: "ts-checkbox-label" }, label),
18
18
  caption && React.createElement("div", { className: "ts-checkbox-caption" }, caption))));
package/lib/components/TsCheckbox/TsCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,6CAA0C;AAE1C,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,eAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,GAAI,CACxD;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB"}
1
+ {"version":3,"file":"TsCheckbox.js","sourceRoot":"","sources":["../../../src/components/TsCheckbox/TsCheckbox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,6CAA0C;AAE1C,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC7F,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IAE3D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,eAAe,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY;QAC7F,6BAAK,SAAS,EAAE,mBAAmB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5E,oBAAC,eAAM,IAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,GAAG,CAClE;QAEN,6BAAK,SAAS,EAAE,yBAAyB,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,6BAAK,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAO;YAC/C,OAAO,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,OAAO,CAAO,CAC5D,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,UAAU,cAmBrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsCheckbox/TsCheckbox.css CHANGED
@@ -16,11 +16,7 @@
16
16
  }
17
17
  /* ##### */
18
18
  /* BOX */
19
- .ts-checkbox:not(.ts-checkbox--disabled):hover .ts-checkbox-box {
20
- background: #e1e3f5;
21
- }
22
19
  .ts-checkbox-box {
23
- position: relative;
24
20
  display: flex;
25
21
  align-items: center;
26
22
  justify-content: center;
@@ -29,17 +25,10 @@
29
25
  height: 24px;
30
26
  min-height: 24px;
31
27
  border-radius: 6px;
32
- color: #3643ba;
33
- transition: all ease 0.3s;
34
28
  }
35
- .ts-checkbox-box::before {
36
- content: '';
37
- position: absolute;
38
- width: 12px;
39
- height: 12px;
40
- border-radius: 6px;
41
- background: #ffffff;
42
- z-index: 10;
29
+ .ts-checkbox-box--checked,
30
+ .ts-checkbox:hover .ts-checkbox-box:not(.ts-checkbox-box--checked) {
31
+ color: #3643ba;
43
32
  }
44
33
  .ts-checkbox-box .ts-icon {
45
34
  z-index: 20;
package/src/components/TsCheckbox/TsCheckbox.tsx CHANGED
@@ -12,8 +12,8 @@ export const TsCheckbox = ({ caption, label, checked, disabled, onChange }: TsCh
12
12
  // Rendering
13
13
  return (
14
14
  <div className={`ts-checkbox ${disabled ? 'ts-checkbox--disabled' : ''}`} onClick={handleChange}>
15
- <div className="ts-checkbox-box">
16
- <TsIcon name={checked ? 'check-square-filled' : 'square'} />
15
+ <div className={`ts-checkbox-box ${checked ? 'ts-checkbox-box--checked' : ''}`}>
16
+ <TsIcon name={checked ? 'check-square-filled' : 'square'} size="24" />
17
17
  </div>
18
18
 
19
19
  <div className={`ts-checkbox-container ${caption ? 'ts-checkbox-container--with-caption' : ''}`}>