@colijnit/configurator 261.20.4 → 261.20.6

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 (23) hide show
  1. package/colijnit-configurator-261.20.6.tgz +0 -0
  2. package/fesm2022/colijnit-configurator.mjs +988 -288
  3. package/fesm2022/colijnit-configurator.mjs.map +1 -1
  4. package/index.d.ts +139 -36
  5. package/lib/components/answers-slideout/style/_layout.scss +2 -2
  6. package/lib/components/configuration-preset/style/_layout.scss +42 -0
  7. package/lib/components/configuration-preset/style/_material-definition.scss +5 -0
  8. package/lib/components/configuration-preset/style/_theme.scss +20 -0
  9. package/lib/components/configuration-preset/style/material.scss +3 -0
  10. package/lib/components/configuration-preset-dialog/style/_layout.scss +82 -0
  11. package/lib/components/configuration-preset-dialog/style/_material-definition.scss +5 -0
  12. package/lib/components/configuration-preset-dialog/style/_theme.scss +7 -0
  13. package/lib/components/configuration-preset-dialog/style/material.scss +3 -0
  14. package/lib/components/product-configurator/style/_layout.scss +4 -0
  15. package/lib/components/product-configurator/style/_material-definition.scss +1 -0
  16. package/lib/components/product-configurator/style/_theme.scss +7 -1
  17. package/lib/components/product-configurator-selector/style/_layout.scss +26 -1
  18. package/lib/components/product-configurator-selector/style/_theme.scss +20 -3
  19. package/lib/components/product-configurator-selector-option-checkbox/style/_theme.scss +3 -0
  20. package/lib/components/product-configurator-selector-option-tile/style/_layout.scss +12 -4
  21. package/lib/components/product-configurator-selector-option-tile/style/_theme.scss +28 -2
  22. package/lib/style/_variables.scss +20 -7
  23. package/package.json +1 -1
package/lib/components/configuration-preset-dialog/style/_layout.scss ADDED
@@ -0,0 +1,82 @@
1
+ @import "../../../style/mixin.scss";
2
+
3
+ @include export-module('co-configuration-preset-dialog-layout') {
4
+ .co-configuration-preset-dialog {
5
+ .configuration-preset-dialog {
6
+ position: fixed;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ top: 0;
11
+ left: 0;
12
+ width: 100%;
13
+ height: 100%;
14
+ z-index: 100;
15
+ background-color: rgba(0, 0, 0, 0.5);
16
+
17
+ .configuration-preset-dialog-container {
18
+ background-color: #fff;
19
+ box-sizing: border-box;
20
+ min-width: 450px;
21
+
22
+ .configuration-preset-dialog-container-header {
23
+ display: flex;
24
+ gap: 10px;
25
+ align-items: center;
26
+ margin-bottom: 20px;
27
+ border-bottom: 1px solid #ccc;
28
+ padding: 20px;
29
+ }
30
+
31
+ .configuration-preset-dialog-container-body {
32
+ padding: 20px;
33
+ position: relative;
34
+
35
+ .validation-error {
36
+ max-width: 450px;
37
+ font-size: var(--font-size-small);
38
+ }
39
+
40
+ .save-success {
41
+ padding: 10px;
42
+ color: var(--success-text-color);
43
+ background-color: var(--success-background-color);
44
+ border: 1px solid var(--success-border-color);
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+
49
+ .save-success-text {
50
+ min-width: 90%;
51
+ text-align: center;
52
+ font-weight: bold;
53
+ }
54
+
55
+ .save-success-button {
56
+ background: none;
57
+ cursor: pointer;
58
+ }
59
+ }
60
+ }
61
+
62
+ .configuration-preset-dialog-container-footer {
63
+ padding: 20px;
64
+ display: flex;
65
+ gap: 10px;
66
+ justify-content: space-evenly;
67
+
68
+ .co-button {
69
+ cursor: pointer;
70
+ }
71
+
72
+ .button-as-link {
73
+ background: none;
74
+ color: var(--text-color);
75
+ text-decoration: underline;
76
+ }
77
+
78
+ }
79
+ }
80
+ }
81
+ }
82
+ }
package/lib/components/configuration-preset-dialog/style/_material-definition.scss ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --success-text-color: #155724;
3
+ --success-background-color: #d4edda;
4
+ --success-border-color: #c3e6cb;
5
+ }
package/lib/components/configuration-preset-dialog/style/_theme.scss ADDED
@@ -0,0 +1,7 @@
1
+ @import "../../../style/mixin.scss";
2
+
3
+ @include export-module('co-configuration-preset-dialog-theme') {
4
+ .co-configuration-preset-dialog {
5
+
6
+ }
7
+ }
package/lib/components/configuration-preset-dialog/style/material.scss ADDED
@@ -0,0 +1,3 @@
1
+ @use './_material-definition.scss';
2
+ @use './_layout.scss';
3
+ @use './_theme.scss';
package/lib/components/product-configurator/style/_layout.scss CHANGED
@@ -27,7 +27,11 @@
27
27
  margin: 0;
28
28
  }
29
29
  }
30
+ .product-configurator-header-actions {
31
+ display: flex;
32
+ gap: 5px;
30
33
 
34
+ }
31
35
  .product-configurator-close {
32
36
  cursor: pointer;
33
37
  }
package/lib/components/product-configurator/style/_material-definition.scss CHANGED
@@ -1,3 +1,4 @@
1
1
  :root {
2
2
  --product-configurator-background-color: #fff;
3
+ --head-co-icon-size: 24px;
3
4
  }
package/lib/components/product-configurator/style/_theme.scss CHANGED
@@ -13,7 +13,13 @@
13
13
  }
14
14
 
15
15
  .product-configurator-text {
16
- font-size: var(--font-size-medium);
16
+ font-size: var(--font-size-small);
17
+ }
18
+ }
19
+ .product-configurator-header-actions {
20
+ co-icon {
21
+ width: var(--head-co-icon-size);
22
+ height: var(--head-co-icon-size);
17
23
  }
18
24
  }
19
25
  }
package/lib/components/product-configurator-selector/style/_layout.scss CHANGED
@@ -90,7 +90,29 @@
90
90
  box-sizing: border-box;
91
91
  }
92
92
  }
93
-
93
+ // container for the displayOption SmallCircle and SmallSquare
94
+ .selection-container-03, .selection-container-04 {
95
+ grid-template-columns: repeat(auto-fill, minmax(50px, .5fr));
96
+ .selector-option-wrapper {
97
+ padding: 5px;
98
+ align-items: center;
99
+ display: flex;
100
+ background: none;
101
+ border: none;
102
+ box-sizing: border-box;
103
+ .product-configurator-selector-option-tile-description {
104
+ display: none;
105
+ }
106
+ }
107
+ }
108
+ .selection-container-03 {
109
+ .selector-option-wrapper {
110
+ border-radius: 100%;
111
+ &.active {
112
+ box-shadow: none;
113
+ }
114
+ }
115
+ }
94
116
  // container for the displayOption small tile
95
117
  .selection-container-06 {
96
118
  grid-template-columns: repeat(auto-fill, minmax(70px, .5fr));
@@ -141,5 +163,8 @@
141
163
  }
142
164
  }
143
165
  }
166
+ &.hidden-frontend {
167
+ display: none;
168
+ }
144
169
  }
145
170
  }
package/lib/components/product-configurator-selector/style/_theme.scss CHANGED
@@ -12,11 +12,13 @@
12
12
  }
13
13
 
14
14
  .selector-option-header {
15
- font-size: var(--font-size-large);
15
+ font-size: var(--font-size-normal);
16
+ font-weight: var(--font-weight-bold);
16
17
  }
17
18
 
18
19
  .selector-option-sub-header {
19
- font-size: var(--font-size-large);
20
+ font-size: var(--font-size-small);
21
+ font-weight: var(--font-weight-normal);
20
22
  }
21
23
 
22
24
  .selector-option-bold-text-header {
@@ -31,11 +33,26 @@
31
33
 
32
34
  .selector-wrapper {
33
35
  .selector-option-wrapper {
34
- border: 1px solid var(--border-color);
36
+ border: 2px solid var(--border-color);
35
37
  border-radius: var(--default-border-radius);
36
38
  background-color: var(--tile-background-color);
37
39
  font-size: var(--font-size-normal);
38
40
  padding: var(--default-padding);
41
+ &.active {
42
+ border: 2px solid var(--border-color-active);
43
+ }
44
+ }
45
+ &.selection-container-03, &.selection-container-08 {
46
+ .selector-option-wrapper {
47
+ &.active {
48
+ border-radius: var(--circle-border-radius);
49
+ }
50
+ }
51
+ }
52
+ &.selection-container-08 {
53
+ .selector-option-wrapper {
54
+ border: none;
55
+ }
39
56
  }
40
57
  }
41
58
 
package/lib/components/product-configurator-selector-option-checkbox/style/_theme.scss CHANGED
@@ -13,7 +13,10 @@
13
13
  }
14
14
 
15
15
  .product-configurator-checkbox-selected {
16
+ background: var(--checked-icon-background);
16
17
  fill: var(--checked-icon-color);
18
+ padding: var(--checked-icon-padding);
19
+ border-radius: var(--checked-selected-icon-radius);
17
20
  }
18
21
  }
19
22
 
package/lib/components/product-configurator-selector-option-tile/style/_layout.scss CHANGED
@@ -10,8 +10,8 @@
10
10
 
11
11
  .product-configurator-selector-option-tile-checkmark {
12
12
  position: absolute;
13
- top: 5px;
14
- right: 5px;
13
+ top: -7px;
14
+ right: -7px;
15
15
  }
16
16
 
17
17
  .product-configurator-selector-option-tile-image {
@@ -34,11 +34,19 @@
34
34
  }
35
35
  }
36
36
 
37
- &.configurator-selector-option-tile-container-small {
37
+ &.configurator-selector-option-tile-container-small,
38
+ &.configurator-selector-option-tile-container-small-rounded,
39
+ &.configurator-selector-option-tile-container-small-square {
38
40
  .product-configurator-selector-option-tile-image {
39
41
  width: 100%;
40
42
  min-height: 40px;
41
- max-width: 40px;
43
+ max-width: 100%;
44
+ }
45
+ }
46
+ &.configurator-selector-option-tile-container-rounded {
47
+ .product-configurator-selector-option-tile-checkmark {
48
+ top: 5px;
49
+ right: 5px;
42
50
  }
43
51
  }
44
52
  }
package/lib/components/product-configurator-selector-option-tile/style/_theme.scss CHANGED
@@ -8,12 +8,13 @@
8
8
  fill: var(--checked-icon-color);
9
9
  height: var(--big-icon-height);
10
10
  width: var(--big-icon-width);
11
- background: rgba(255, 255, 255, 0.5);
12
- border-radius: 50%;
11
+ background: var(--checked-icon-background);
12
+ border-radius: var(--checked-icon-radius);
13
13
 
14
14
  co-icon {
15
15
  width: var(--big-icon-width);
16
16
  height: var(--big-icon-height);
17
+ padding: var(--checked-icon-padding);
17
18
  }
18
19
  }
19
20
 
@@ -46,11 +47,36 @@
46
47
  }
47
48
  }
48
49
 
50
+ &.configurator-selector-option-tile-container-small-rounded, &.configurator-selector-option-tile-container-rounded {
51
+ .product-configurator-selector-option-tile-checkmark {
52
+ border-radius: var(--circle-border-radius);
53
+ }
54
+ }
55
+
49
56
  &.configurator-selector-option-tile-container-small {
50
57
  .product-configurator-selector-option-tile-description {
51
58
  font-size: var(--font-size-small);
52
59
  }
53
60
  }
61
+ &.configurator-selector-option-tile-container-rounded {
62
+ .product-configurator-selector-option-tile-image {
63
+ aspect-ratio: 1/1;
64
+ img {
65
+ height: 100%;
66
+ max-height: 100%;
67
+ object-fit: contain;
68
+ padding: var(--default-padding);
69
+ }
70
+ }
71
+ &.active {
72
+ .product-configurator-selector-option-tile-image {
73
+ img {
74
+ border: 2px solid var(--border-color-active);
75
+ box-shadow: none;
76
+ }
77
+ }
78
+ }
79
+ }
54
80
  }
55
81
  }
56
82
  }
package/lib/style/_variables.scss CHANGED
@@ -3,18 +3,24 @@
3
3
  --tile-container-background: #EBEBED;
4
4
 
5
5
  /* tiles */
6
- --border-color: #f8f8fa;
6
+ --border-color: transparent;
7
+ --border-color-active: #979284;
7
8
  --default-border-radius: 3px;
8
- --tile-background-color: #f8f8fa;
9
+ --circle-border-radius: 50%;
10
+ --tile-background-color: #FFFFFF;
9
11
  --default-padding: 5px;
10
12
 
11
13
 
12
14
  /* checkmarks and icons */
13
- --checked-icon-color: #17953a;
14
- --big-icon-height: 24px;
15
- --big-icon-width: 24px;
16
- --small-icon-height: 20px;
17
- --small-icon-width: 20px;
15
+ --checked-icon-color: #FFFFFF;
16
+ --checked-icon-background: #979284;
17
+ --checked-icon-radius: 0 3px;
18
+ --checked-selected-icon-radius: 3px;
19
+ --checked-icon-padding: 3px;
20
+ --big-icon-height: 20px;
21
+ --big-icon-width: 20px;
22
+ --small-icon-height: 18px;
23
+ --small-icon-width: 18px;
18
24
  --xs-icon-height: 16px;
19
25
  --xs-icon-width: 16px;
20
26
 
@@ -29,9 +35,16 @@
29
35
  --font-size-small: 12px;
30
36
  --font-size-xs: 10px;
31
37
 
38
+ /* fontweights */
39
+ --font-weight-light: 400;
40
+ --font-weight-normal: 500;
41
+ --font-weight-bold: 600;
42
+ --font-weight-bolder: 700;
43
+
32
44
  /* Links and text color */
33
45
  --text-color: #333333;
34
46
  --text-color-hover: #333333;
35
47
  --load-more-link-color: #da9803;
36
48
  --white-text-color: #fff;
49
+ --link-text-color: #0070ba;
37
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/configurator",
3
- "version": "261.20.4",
3
+ "version": "261.20.6",
4
4
  "description": "iOne configurator specific for version 261",
5
5
  "private": false,
6
6
  "peerDependencies": {