@configura/web-ui 1.6.0-iotest.3 → 1.6.0

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 (98) hide show
  1. package/.postcssrc.json +8 -8
  2. package/LICENSE +201 -201
  3. package/README.md +1 -1
  4. package/dist/components/CanvasWrapper.d.ts +9 -9
  5. package/dist/components/CanvasWrapper.js +8 -8
  6. package/dist/components/CfgPriceView.d.ts +6 -6
  7. package/dist/components/CfgPriceView.js +13 -13
  8. package/dist/components/ConfigurationActionsButtonRow.d.ts +11 -11
  9. package/dist/components/ConfigurationActionsButtonRow.js +13 -13
  10. package/dist/components/Configurator.d.ts +12 -12
  11. package/dist/components/Configurator.js +15 -15
  12. package/dist/components/ConfiguratorWrapper.d.ts +8 -8
  13. package/dist/components/ConfiguratorWrapper.js +5 -5
  14. package/dist/components/CurrencyPrice.d.ts +9 -9
  15. package/dist/components/CurrencyPrice.js +7 -7
  16. package/dist/components/ErrorContext.d.ts +3 -0
  17. package/dist/components/ErrorContext.js +2 -0
  18. package/dist/components/ExpandableHeadingRow.d.ts +15 -15
  19. package/dist/components/ExpandableHeadingRow.js +21 -21
  20. package/dist/components/Loading.d.ts +13 -13
  21. package/dist/components/Loading.js +20 -20
  22. package/dist/components/ProductInformation.d.ts +13 -13
  23. package/dist/components/ProductInformation.js +14 -14
  24. package/dist/components/TaskListView.d.ts +8 -8
  25. package/dist/components/TaskListView.js +69 -54
  26. package/dist/components/TaskStartView.d.ts +12 -12
  27. package/dist/components/TaskStartView.js +29 -22
  28. package/dist/components/icons/Checkmark.d.ts +6 -6
  29. package/dist/components/icons/Checkmark.js +12 -12
  30. package/dist/components/icons/Chevron.d.ts +7 -7
  31. package/dist/components/icons/Chevron.js +18 -18
  32. package/dist/components/icons/CircleXmarkIcon.d.ts +3 -3
  33. package/dist/components/icons/CircleXmarkIcon.js +8 -8
  34. package/dist/components/icons/DownloadIcon.d.ts +3 -3
  35. package/dist/components/icons/DownloadIcon.js +8 -8
  36. package/dist/components/icons/ErrorIcon.d.ts +3 -3
  37. package/dist/components/icons/ErrorIcon.js +8 -8
  38. package/dist/components/productConfiguration/CfgAdditionalProductView.d.ts +3 -3
  39. package/dist/components/productConfiguration/CfgAdditionalProductView.js +42 -38
  40. package/dist/components/productConfiguration/CfgCheckboxView.d.ts +9 -19
  41. package/dist/components/productConfiguration/CfgCheckboxView.js +29 -22
  42. package/dist/components/productConfiguration/CfgCheckboxesView.d.ts +9 -13
  43. package/dist/components/productConfiguration/CfgCheckboxesView.js +18 -19
  44. package/dist/components/productConfiguration/CfgDropdownOptionView.d.ts +9 -19
  45. package/dist/components/productConfiguration/CfgDropdownOptionView.js +44 -36
  46. package/dist/components/productConfiguration/CfgDropdownView.d.ts +9 -13
  47. package/dist/components/productConfiguration/CfgDropdownView.js +20 -21
  48. package/dist/components/productConfiguration/CfgFeatureView.d.ts +35 -29
  49. package/dist/components/productConfiguration/CfgFeatureView.js +64 -36
  50. package/dist/components/productConfiguration/CfgGroupView.d.ts +4 -4
  51. package/dist/components/productConfiguration/CfgGroupView.js +7 -7
  52. package/dist/components/productConfiguration/CfgOptionFeaturesView.d.ts +3 -6
  53. package/dist/components/productConfiguration/CfgOptionFeaturesView.js +13 -13
  54. package/dist/components/productConfiguration/CfgOptionNumericView.d.ts +29 -27
  55. package/dist/components/productConfiguration/CfgOptionNumericView.js +132 -119
  56. package/dist/components/productConfiguration/CfgOptionPriceView.d.ts +9 -9
  57. package/dist/components/productConfiguration/CfgOptionPriceView.js +29 -29
  58. package/dist/components/productConfiguration/CfgProductConfigurationView.d.ts +17 -18
  59. package/dist/components/productConfiguration/CfgProductConfigurationView.js +47 -46
  60. package/dist/css/web-ui.css +1 -1
  61. package/dist/css/web-ui.css.map +1 -1
  62. package/dist/index.d.ts +23 -22
  63. package/dist/index.js +23 -22
  64. package/dist/scss/_button.scss +36 -36
  65. package/dist/scss/_configurator.scss +88 -87
  66. package/dist/scss/_expandable.scss +37 -37
  67. package/dist/scss/_feature-item.scss +137 -137
  68. package/dist/scss/_forms.scss +42 -42
  69. package/dist/scss/_hr.scss +16 -16
  70. package/dist/scss/_loading.scss +98 -98
  71. package/dist/scss/_mixins.scss +56 -56
  72. package/dist/scss/_option-tree.scss +29 -29
  73. package/dist/scss/_product-information.scss +49 -49
  74. package/dist/scss/_range-view.scss +39 -39
  75. package/dist/scss/_slider.scss +70 -70
  76. package/dist/scss/_tasks.scss +72 -72
  77. package/dist/scss/_themed.scss +147 -147
  78. package/dist/scss/_utilities.scss +21 -21
  79. package/dist/scss/_variables.scss +6 -6
  80. package/dist/scss/icons/_checkmark.scss +46 -46
  81. package/dist/scss/icons/_chevron.scss +62 -62
  82. package/dist/scss/icons/_circle-xmark-icon.scss +24 -24
  83. package/dist/scss/icons/_download-icon.scss +24 -24
  84. package/dist/scss/icons/_error-icon.scss +24 -24
  85. package/dist/scss/web-ui.scss +11 -11
  86. package/dist/useObservable.d.ts +4 -4
  87. package/dist/useObservable.js +18 -18
  88. package/dist/useRerender.d.ts +1 -1
  89. package/dist/useRerender.js +5 -5
  90. package/dist/useResize.d.ts +6 -6
  91. package/dist/useResize.js +47 -47
  92. package/dist/useSelected.d.ts +2 -2
  93. package/dist/useSelected.js +13 -13
  94. package/dist/useUniqueId.d.ts +1 -1
  95. package/dist/useUniqueId.js +7 -7
  96. package/dist/utilities.d.ts +5 -5
  97. package/dist/utilities.js +1 -1
  98. package/package.json +3 -3
@@ -1,16 +1,16 @@
1
- @use "mixins";
2
-
3
- @mixin styles($color) {
4
- @include mixins.cfgRootStyles;
5
- border: 0;
6
- border-bottom: 0.1em solid $color;
7
- padding: 0;
8
- margin: 0;
9
- }
10
-
11
- @mixin classes($color) {
12
- .cfgHr {
13
- @include styles($color);
14
- @content;
15
- }
16
- }
1
+ @use "mixins";
2
+
3
+ @mixin styles($color) {
4
+ @include mixins.cfgRootStyles;
5
+ border: 0;
6
+ border-bottom: 0.1em solid $color;
7
+ padding: 0;
8
+ margin: 0;
9
+ }
10
+
11
+ @mixin classes($color) {
12
+ .cfgHr {
13
+ @include styles($color);
14
+ @content;
15
+ }
16
+ }
@@ -1,98 +1,98 @@
1
- /**
2
- * Web UI Loading
3
- */
4
-
5
- @use "mixins";
6
-
7
- @mixin classes(
8
- $textColor,
9
- $spinnerColor1,
10
- $spinnerColor2,
11
- $overlayBackgroundColor,
12
- $overlayingZIndex
13
- ) {
14
- .cfgCenteredLoading {
15
- @include mixins.cfgRootStyles;
16
- align-items: center;
17
- display: flex;
18
- flex-direction: column;
19
- height: 100%;
20
- justify-content: center;
21
- width: 100%;
22
- }
23
-
24
- .cfgOverlayLoading {
25
- @include mixins.cfgRootStyles;
26
-
27
- align-items: center;
28
- background-color: $overlayBackgroundColor;
29
- bottom: 0;
30
- display: flex;
31
- flex-direction: column;
32
- justify-content: center;
33
- left: 0;
34
- position: absolute;
35
- right: 0;
36
- top: 0;
37
- z-index: $overlayingZIndex;
38
-
39
- &--clickThrough {
40
- background-color: transparent;
41
- pointer-events: none;
42
-
43
- .cfgLoadingWithText {
44
- padding: 2em 2em 1.8em;
45
- border-radius: 0.8em;
46
- background-color: $overlayBackgroundColor;
47
- opacity: 0.8;
48
- border: 0.1em solid $spinnerColor2;
49
- }
50
- }
51
-
52
- &--fullWindow {
53
- position: fixed;
54
- z-index: #{$overlayingZIndex + 1};
55
- }
56
- }
57
-
58
- .cfgLoadingWithText {
59
- @include mixins.cfgRootStyles;
60
- @include mixins.cfgDefaultFont;
61
-
62
- text-align: center;
63
-
64
- &__text {
65
- color: $textColor;
66
- font-weight: 600;
67
- margin-top: 0.5em;
68
- font-size: 1.6em;
69
- }
70
- }
71
-
72
- .cfgLoading {
73
- @include mixins.cfgRootStyles;
74
-
75
- animation: rotate 1.1s linear 0s infinite;
76
- border-radius: 100%;
77
- border: 0.5em solid $spinnerColor2;
78
- border-bottom-color: $spinnerColor1;
79
- display: inline-block;
80
- height: 3em;
81
- width: 3em;
82
-
83
- &--small {
84
- border-width: 0.4em;
85
- height: 2em;
86
- width: 2em;
87
- }
88
- }
89
-
90
- @keyframes rotate {
91
- from {
92
- transform: rotate(0deg);
93
- }
94
- to {
95
- transform: rotate(360deg);
96
- }
97
- }
98
- }
1
+ /**
2
+ * Web UI Loading
3
+ */
4
+
5
+ @use "mixins";
6
+
7
+ @mixin classes(
8
+ $textColor,
9
+ $spinnerColor1,
10
+ $spinnerColor2,
11
+ $overlayBackgroundColor,
12
+ $overlayingZIndex
13
+ ) {
14
+ .cfgCenteredLoading {
15
+ @include mixins.cfgRootStyles;
16
+ align-items: center;
17
+ display: flex;
18
+ flex-direction: column;
19
+ height: 100%;
20
+ justify-content: center;
21
+ width: 100%;
22
+ }
23
+
24
+ .cfgOverlayLoading {
25
+ @include mixins.cfgRootStyles;
26
+
27
+ align-items: center;
28
+ background-color: $overlayBackgroundColor;
29
+ bottom: 0;
30
+ display: flex;
31
+ flex-direction: column;
32
+ justify-content: center;
33
+ left: 0;
34
+ position: absolute;
35
+ right: 0;
36
+ top: 0;
37
+ z-index: $overlayingZIndex;
38
+
39
+ &--clickThrough {
40
+ background-color: transparent;
41
+ pointer-events: none;
42
+
43
+ .cfgLoadingWithText {
44
+ padding: 2em 2em 1.8em;
45
+ border-radius: 0.8em;
46
+ background-color: $overlayBackgroundColor;
47
+ opacity: 0.8;
48
+ border: 0.1em solid $spinnerColor2;
49
+ }
50
+ }
51
+
52
+ &--fullWindow {
53
+ position: fixed;
54
+ z-index: #{$overlayingZIndex + 1};
55
+ }
56
+ }
57
+
58
+ .cfgLoadingWithText {
59
+ @include mixins.cfgRootStyles;
60
+ @include mixins.cfgDefaultFont;
61
+
62
+ text-align: center;
63
+
64
+ &__text {
65
+ color: $textColor;
66
+ font-weight: 600;
67
+ margin-top: 0.5em;
68
+ font-size: 1.6em;
69
+ }
70
+ }
71
+
72
+ .cfgLoading {
73
+ @include mixins.cfgRootStyles;
74
+
75
+ animation: rotate 1.1s linear 0s infinite;
76
+ border-radius: 100%;
77
+ border: 0.5em solid $spinnerColor2;
78
+ border-bottom-color: $spinnerColor1;
79
+ display: inline-block;
80
+ height: 3em;
81
+ width: 3em;
82
+
83
+ &--small {
84
+ border-width: 0.4em;
85
+ height: 2em;
86
+ width: 2em;
87
+ }
88
+ }
89
+
90
+ @keyframes rotate {
91
+ from {
92
+ transform: rotate(0deg);
93
+ }
94
+ to {
95
+ transform: rotate(360deg);
96
+ }
97
+ }
98
+ }
@@ -1,56 +1,56 @@
1
- @mixin noButtonLook {
2
- appearance: none;
3
- font-family: inherit;
4
- font-size: inherit;
5
- color: inherit;
6
- background: none;
7
- border: none;
8
- padding: 0;
9
- }
10
-
11
- @mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {
12
- box-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;
13
- }
14
-
15
- @mixin borderBox {
16
- box-sizing: border-box;
17
- &:before,
18
- &:after {
19
- box-sizing: inherit;
20
- }
21
- }
22
-
23
- @mixin cfgRootStyles {
24
- @include borderBox;
25
-
26
- * {
27
- @include borderBox;
28
- }
29
- }
30
-
31
- @mixin cfgDefaultFont {
32
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
33
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
34
- }
35
-
36
- @mixin cfgCheckAndRadio($color) {
37
- align-items: center;
38
- border: 0.2em solid $color;
39
- display: flex;
40
- flex: 0 0 auto;
41
- height: 2.2em;
42
- justify-content: center;
43
- pointer-events: none;
44
- user-select: none;
45
- width: 2.2em;
46
- }
47
-
48
- @mixin cfgCheckbox($color) {
49
- @include cfgCheckAndRadio($color);
50
- border-radius: 0.3em;
51
- }
52
-
53
- @mixin cfgRadio($color) {
54
- @include cfgCheckAndRadio($color);
55
- border-radius: 50%;
56
- }
1
+ @mixin noButtonLook {
2
+ appearance: none;
3
+ font-family: inherit;
4
+ font-size: inherit;
5
+ color: inherit;
6
+ background: none;
7
+ border: none;
8
+ padding: 0;
9
+ }
10
+
11
+ @mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {
12
+ box-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;
13
+ }
14
+
15
+ @mixin borderBox {
16
+ box-sizing: border-box;
17
+ &:before,
18
+ &:after {
19
+ box-sizing: inherit;
20
+ }
21
+ }
22
+
23
+ @mixin cfgRootStyles {
24
+ @include borderBox;
25
+
26
+ * {
27
+ @include borderBox;
28
+ }
29
+ }
30
+
31
+ @mixin cfgDefaultFont {
32
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
33
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
34
+ }
35
+
36
+ @mixin cfgCheckAndRadio($color) {
37
+ align-items: center;
38
+ border: 0.2em solid $color;
39
+ display: flex;
40
+ flex: 0 0 auto;
41
+ height: 2.2em;
42
+ justify-content: center;
43
+ pointer-events: none;
44
+ user-select: none;
45
+ width: 2.2em;
46
+ }
47
+
48
+ @mixin cfgCheckbox($color) {
49
+ @include cfgCheckAndRadio($color);
50
+ border-radius: 0.3em;
51
+ }
52
+
53
+ @mixin cfgRadio($color) {
54
+ @include cfgCheckAndRadio($color);
55
+ border-radius: 50%;
56
+ }
@@ -1,29 +1,29 @@
1
- /**
2
- * Web UI Option tree
3
- */
4
-
5
- @use "mixins";
6
-
7
- @mixin classes {
8
- .cfgOptionTree {
9
- @include mixins.cfgRootStyles;
10
-
11
- list-style: none;
12
- margin: 0;
13
- padding: 0;
14
-
15
- &--topLevel {
16
- padding-left: 1.7em;
17
- }
18
-
19
- &--indent {
20
- margin-left: 3.2em;
21
- }
22
-
23
- &--compThumb {
24
- margin-left: 4.2em;
25
- }
26
-
27
- @content;
28
- }
29
- }
1
+ /**
2
+ * Web UI Option tree
3
+ */
4
+
5
+ @use "mixins";
6
+
7
+ @mixin classes {
8
+ .cfgOptionTree {
9
+ @include mixins.cfgRootStyles;
10
+
11
+ list-style: none;
12
+ margin: 0;
13
+ padding: 0;
14
+
15
+ &--topLevel {
16
+ padding-left: 1.7em;
17
+ }
18
+
19
+ &--indent {
20
+ margin-left: 3.2em;
21
+ }
22
+
23
+ &--compThumb {
24
+ margin-left: 4.2em;
25
+ }
26
+
27
+ @content;
28
+ }
29
+ }
@@ -1,49 +1,49 @@
1
- /**
2
- * Web UI Product information
3
- */
4
-
5
- @use "sass:math";
6
- @use "mixins";
7
-
8
- @mixin classes($textColor) {
9
- .cfgProductInfo {
10
- @include mixins.cfgRootStyles;
11
-
12
- color: $textColor;
13
-
14
- display: flex;
15
-
16
- &__left {
17
- flex: 1 1 auto;
18
- min-width: 0;
19
- overflow: hidden;
20
- }
21
-
22
- &__right {
23
- align-items: flex-end;
24
- display: flex;
25
- flex-direction: column;
26
- flex: 1 0 auto;
27
- margin-left: 1em;
28
- max-width: 0.333333333;
29
- min-width: 0;
30
- }
31
-
32
- &__name {
33
- display: block;
34
- font-size: 1.6em;
35
- font-weight: 600;
36
- line-height: 1.33;
37
- margin: 0;
38
- }
39
-
40
- &__number {
41
- font-size: 1.3em;
42
- font-weight: 400;
43
- line-height: 1.38;
44
- margin: 0;
45
- }
46
-
47
- @content;
48
- }
49
- }
1
+ /**
2
+ * Web UI Product information
3
+ */
4
+
5
+ @use "sass:math";
6
+ @use "mixins";
7
+
8
+ @mixin classes($textColor) {
9
+ .cfgProductInfo {
10
+ @include mixins.cfgRootStyles;
11
+
12
+ color: $textColor;
13
+
14
+ display: flex;
15
+
16
+ &__left {
17
+ flex: 1 1 auto;
18
+ min-width: 0;
19
+ overflow: hidden;
20
+ }
21
+
22
+ &__right {
23
+ align-items: flex-end;
24
+ display: flex;
25
+ flex-direction: column;
26
+ flex: 1 0 auto;
27
+ margin-left: 1em;
28
+ max-width: 0.333333333;
29
+ min-width: 0;
30
+ }
31
+
32
+ &__name {
33
+ display: block;
34
+ font-size: 1.6em;
35
+ font-weight: 600;
36
+ line-height: 1.33;
37
+ margin: 0;
38
+ }
39
+
40
+ &__number {
41
+ font-size: 1.3em;
42
+ font-weight: 400;
43
+ line-height: 1.38;
44
+ margin: 0;
45
+ }
46
+
47
+ @content;
48
+ }
49
+ }
@@ -1,39 +1,39 @@
1
- @mixin classes($errorColor) {
2
- .cfgRangeView {
3
- &__inputs {
4
- display: flex;
5
- align-items: center;
6
- }
7
-
8
- &__number-input {
9
- font-size: 1.5em;
10
- flex-grow: 1;
11
- text-align: right;
12
- }
13
-
14
- &__unit-label {
15
- font-size: 1.5em;
16
- margin-left: 0.3em;
17
- }
18
-
19
- &__slider-input.cfgSlider {
20
- margin-left: 1em;
21
- flex-grow: 3;
22
- }
23
-
24
- &__error {
25
- display: flex;
26
- align-items: center;
27
-
28
- margin-top: 1em;
29
- font-size: 1.5em;
30
- color: $errorColor;
31
-
32
- .cfgErrorIcon {
33
- padding-right: 0.25em;
34
- width: 1.25em;
35
- height: 1em;
36
- }
37
- }
38
- }
39
- }
1
+ @mixin classes($errorColor) {
2
+ .cfgRangeView {
3
+ &__inputs {
4
+ display: flex;
5
+ align-items: center;
6
+ }
7
+
8
+ &__number-input {
9
+ font-size: 1.5em;
10
+ flex-grow: 1;
11
+ text-align: right;
12
+ }
13
+
14
+ &__unit-label {
15
+ font-size: 1.5em;
16
+ margin-left: 0.3em;
17
+ }
18
+
19
+ &__slider-input.cfgSlider {
20
+ margin-left: 1em;
21
+ flex-grow: 3;
22
+ }
23
+
24
+ &__error {
25
+ display: flex;
26
+ align-items: center;
27
+
28
+ margin-top: 1em;
29
+ font-size: 1.5em;
30
+ color: $errorColor;
31
+
32
+ .cfgErrorIcon {
33
+ padding-right: 0.25em;
34
+ width: 1.25em;
35
+ height: 1em;
36
+ }
37
+ }
38
+ }
39
+ }