@colijnit/corecomponents_v12 12.0.15 → 12.0.18

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 (182) hide show
  1. package/bundles/colijnit-corecomponents_v12.umd.js +1099 -277
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.d.ts +9 -8
  4. package/colijnit-corecomponents_v12.metadata.json +1 -1
  5. package/esm2015/colijnit-corecomponents_v12.js +10 -9
  6. package/esm2015/lib/components/base/base-input.component.js +40 -20
  7. package/esm2015/lib/components/carousel-3d/carousel-3d.component.js +313 -0
  8. package/esm2015/lib/components/carousel-3d/carousel-3d.module.js +19 -0
  9. package/esm2015/lib/components/carousel-3d/carouselItem.js +54 -0
  10. package/esm2015/lib/components/co-dialog/co-dialog.component.js +46 -48
  11. package/esm2015/lib/components/co-dialog/co-dialog.module.js +7 -4
  12. package/esm2015/lib/components/co-dialog-prompt/co-dialog-prompt.component.js +6 -6
  13. package/esm2015/lib/components/co-kanban/co-kanban.component.js +8 -7
  14. package/esm2015/lib/components/co-rich-text-editor/co-rich-text-editor.component.js +2 -2
  15. package/esm2015/lib/components/collapsible/collapsible.component.js +58 -0
  16. package/esm2015/lib/components/collapsible/collapsible.module.js +17 -0
  17. package/esm2015/lib/components/drop-down-list/drop-down-list.component.js +30 -8
  18. package/esm2015/lib/components/drop-down-list/drop-down.module.js +4 -2
  19. package/esm2015/lib/components/form/form.component.js +2 -21
  20. package/esm2015/lib/components/form/form.module.js +4 -4
  21. package/esm2015/lib/components/grid/base/base-grid.component.js +1 -1
  22. package/esm2015/lib/components/grid/base/base-selection-grid.component.js +1 -1
  23. package/esm2015/lib/components/grid/co-grid.component.js +2 -2
  24. package/esm2015/lib/components/input-checkbox/input-checkbox.component.js +15 -5
  25. package/esm2015/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.js +6 -14
  26. package/esm2015/lib/components/input-combo-box/input-combo-box.component.js +24 -29
  27. package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +10 -7
  28. package/esm2015/lib/components/input-listbox/input-listbox.component.js +87 -0
  29. package/esm2015/lib/components/input-listbox/input-listbox.module.js +25 -0
  30. package/esm2015/lib/components/input-number-picker/input-number-picker.component.js +55 -30
  31. package/esm2015/lib/components/input-number-picker/input-number-picker.module.js +5 -3
  32. package/esm2015/lib/components/input-radio-button/input-radio-button.component.js +13 -5
  33. package/esm2015/lib/components/input-text/input-text.component.js +22 -81
  34. package/esm2015/lib/components/input-text/input-text.module.js +16 -13
  35. package/esm2015/lib/components/input-textarea/input-textarea.component.js +62 -0
  36. package/esm2015/lib/components/input-textarea/input-textarea.module.js +23 -0
  37. package/esm2015/lib/components/multi-select-list/multi-select-list.component.js +37 -9
  38. package/esm2015/lib/components/multi-select-list/multi-select-list.module.js +4 -2
  39. package/esm2015/lib/components/pivot/co-pivot.component.js +2 -2
  40. package/esm2015/lib/components/simple-grid/simple-grid-column.directive.js +36 -0
  41. package/esm2015/lib/components/simple-grid/simple-grid.component.js +112 -0
  42. package/esm2015/lib/components/simple-grid/simple-grid.module.js +24 -0
  43. package/esm2015/lib/components/validation-error/validation-error.component.js +23 -0
  44. package/esm2015/lib/components/validation-error/validation-error.module.js +19 -0
  45. package/esm2015/public-api.js +13 -1
  46. package/fesm2015/colijnit-corecomponents_v12.js +1176 -337
  47. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  48. package/lib/components/base/base-input.component.d.ts +14 -9
  49. package/lib/components/button/style/_co-ripple.scss +69 -0
  50. package/lib/components/button/style/_layout.scss +7 -4
  51. package/lib/components/button/style/_material-definition.scss +1 -0
  52. package/lib/components/button/style/_theme.scss +2 -27
  53. package/lib/components/button/style/material.scss +18 -0
  54. package/lib/components/button-drop-down/style/_layout.scss +0 -2
  55. package/lib/components/button-drop-down/style/_theme.scss +0 -2
  56. package/lib/components/button-drop-down/style/material.scss +1 -0
  57. package/lib/components/carousel-3d/carousel-3d.component.d.ts +55 -0
  58. package/lib/components/carousel-3d/carousel-3d.module.d.ts +2 -0
  59. package/lib/components/carousel-3d/carouselItem.d.ts +13 -0
  60. package/lib/components/carousel-3d/style/_layout.scss +62 -0
  61. package/lib/components/carousel-3d/style/_material-definition.scss +6 -0
  62. package/lib/components/carousel-3d/style/_theme.scss +4 -0
  63. package/lib/components/carousel-3d/style/material.scss +5 -0
  64. package/lib/components/co-dialog/co-dialog.component.d.ts +6 -13
  65. package/lib/components/co-dialog/style/_layout.scss +44 -0
  66. package/lib/components/co-dialog/style/_material-definition.scss +23 -0
  67. package/lib/components/co-dialog/style/_theme.scss +24 -0
  68. package/lib/components/co-dialog/style/material.scss +5 -0
  69. package/lib/components/co-dialog-prompt/co-dialog-prompt.component.d.ts +2 -2
  70. package/lib/components/co-kanban/co-kanban.component.d.ts +1 -0
  71. package/lib/components/co-kanban/style/_layout.scss +48 -0
  72. package/lib/components/co-kanban/style/_material-definition.scss +25 -0
  73. package/lib/components/co-kanban/style/_theme.scss +3 -0
  74. package/lib/components/co-kanban/style/material.scss +14 -0
  75. package/lib/components/co-rich-text-editor/co-rich-text-editor.component.d.ts +1 -1
  76. package/lib/components/co-rich-text-editor/style/_layout.scss +0 -2
  77. package/lib/components/co-rich-text-editor/style/_theme.scss +0 -2
  78. package/lib/components/co-rich-text-editor/style/material.scss +1 -0
  79. package/lib/components/co-toggle/co-toggle.component.scss +1 -0
  80. package/lib/components/collapsible/collapsible.component.d.ts +16 -0
  81. package/lib/components/collapsible/collapsible.module.d.ts +2 -0
  82. package/lib/components/collapsible/style/_layout.scss +50 -0
  83. package/lib/components/collapsible/style/_material-definition.scss +9 -0
  84. package/lib/components/collapsible/style/_theme.scss +5 -0
  85. package/lib/components/collapsible/style/material.scss +5 -0
  86. package/lib/components/drop-down-list/drop-down-list.component.d.ts +12 -2
  87. package/lib/components/drop-down-list/style/_layout.scss +8 -3
  88. package/lib/components/drop-down-list/style/_theme.scss +0 -2
  89. package/lib/components/drop-down-list/style/material.scss +2 -0
  90. package/lib/components/form/form.component.d.ts +0 -1
  91. package/lib/components/grid/base/base-selection-grid.component.d.ts +1 -2
  92. package/lib/components/grid/co-grid.component.d.ts +1 -1
  93. package/lib/components/grid/style/_layout.scss +0 -2
  94. package/lib/components/grid/style/_theme.scss +0 -2
  95. package/lib/components/grid/style/material.scss +1 -0
  96. package/lib/components/input-checkbox/input-checkbox.component.d.ts +9 -2
  97. package/lib/components/input-checkbox/style/_layout.scss +0 -2
  98. package/lib/components/input-checkbox/style/_theme.scss +0 -2
  99. package/lib/components/input-checkbox/style/material.scss +1 -0
  100. package/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.d.ts +4 -6
  101. package/lib/components/input-checkbox-multi-select/style/_layout.scss +0 -2
  102. package/lib/components/input-checkbox-multi-select/style/_theme.scss +0 -2
  103. package/lib/components/input-checkbox-multi-select/style/material.scss +1 -0
  104. package/lib/components/input-combo-box/input-combo-box.component.d.ts +6 -7
  105. package/lib/components/input-combo-box/style/_layout.scss +10 -3
  106. package/lib/components/input-combo-box/style/_material-definition.scss +0 -7
  107. package/lib/components/input-combo-box/style/_theme.scss +0 -2
  108. package/lib/components/input-combo-box/style/material.scss +9 -0
  109. package/lib/components/input-date-picker/input-date-picker.component.d.ts +4 -3
  110. package/lib/components/input-date-picker/style/_layout.scss +4 -3
  111. package/lib/components/input-date-picker/style/_theme.scss +0 -2
  112. package/lib/components/input-date-picker/style/material.scss +2 -0
  113. package/lib/components/input-listbox/input-listbox.component.d.ts +25 -0
  114. package/lib/components/input-listbox/input-listbox.module.d.ts +2 -0
  115. package/lib/components/input-listbox/style/_layout.scss +22 -0
  116. package/lib/components/input-listbox/style/_material-definition.scss +10 -0
  117. package/lib/components/input-listbox/style/_theme.scss +12 -0
  118. package/lib/components/input-listbox/style/material.scss +6 -0
  119. package/lib/components/input-number-picker/input-number-picker.component.d.ts +9 -5
  120. package/lib/components/input-number-picker/style/_layout.scss +41 -0
  121. package/lib/components/input-number-picker/style/_material-definition.scss +17 -0
  122. package/lib/components/input-number-picker/style/_theme.scss +20 -0
  123. package/lib/components/input-number-picker/style/material.scss +5 -0
  124. package/lib/components/input-radio-button/input-radio-button.component.d.ts +7 -2
  125. package/lib/components/input-radio-button/style/_layout.scss +0 -2
  126. package/lib/components/input-radio-button/style/_theme.scss +0 -2
  127. package/lib/components/input-radio-button/style/material.scss +1 -0
  128. package/lib/components/input-search/style/_layout.scss +39 -0
  129. package/lib/components/input-search/style/_material-definition.scss +6 -0
  130. package/lib/components/input-search/style/_theme.scss +6 -0
  131. package/lib/components/input-search/style/material.scss +5 -0
  132. package/lib/components/input-text/input-text.component.d.ts +6 -30
  133. package/lib/components/input-text/style/_layout.scss +14 -3
  134. package/lib/components/input-text/style/_material-definition.scss +4 -3
  135. package/lib/components/input-text/style/_theme.scss +0 -2
  136. package/lib/components/input-text/style/material.scss +3 -0
  137. package/lib/components/input-textarea/input-textarea.component.d.ts +18 -0
  138. package/lib/components/input-textarea/input-textarea.module.d.ts +2 -0
  139. package/lib/components/input-textarea/style/_layout.scss +20 -0
  140. package/lib/components/input-textarea/style/_material-definition.scss +4 -0
  141. package/lib/components/input-textarea/style/_theme.scss +8 -0
  142. package/lib/components/input-textarea/style/material.scss +7 -0
  143. package/lib/components/multi-select-list/multi-select-list.component.d.ts +13 -2
  144. package/lib/components/multi-select-list/style/_layout.scss +10 -3
  145. package/lib/components/multi-select-list/style/_theme.scss +0 -2
  146. package/lib/components/multi-select-list/style/material.scss +2 -0
  147. package/lib/components/pivot/co-pivot.component.d.ts +2 -2
  148. package/lib/components/pivot/style/_layout.scss +0 -2
  149. package/lib/components/pivot/style/_theme.scss +0 -2
  150. package/lib/components/pivot/style/material.scss +1 -0
  151. package/lib/components/simple-grid/simple-grid-column.directive.d.ts +18 -0
  152. package/lib/components/simple-grid/simple-grid.component.d.ts +26 -0
  153. package/lib/components/simple-grid/simple-grid.module.d.ts +2 -0
  154. package/lib/components/simple-grid/style/_layout.scss +78 -0
  155. package/lib/components/simple-grid/style/_material-definition.scss +16 -0
  156. package/lib/components/simple-grid/style/_theme.scss +15 -0
  157. package/lib/components/simple-grid/style/material.scss +5 -0
  158. package/lib/components/validation-error/style/_layout.scss +37 -0
  159. package/lib/components/validation-error/style/_material-definition.scss +9 -0
  160. package/lib/components/validation-error/style/_theme.scss +21 -0
  161. package/lib/components/validation-error/style/material.scss +5 -0
  162. package/lib/components/validation-error/validation-error.component.d.ts +4 -0
  163. package/lib/components/validation-error/validation-error.module.d.ts +2 -0
  164. package/lib/style/_input.mixins.scss +70 -281
  165. package/lib/style/_variables.scss +2 -0
  166. package/lib/style/material2/_core.scss +3 -3
  167. package/lib/style/material2/_material2-scss-barrel.scss +10 -10
  168. package/package.json +5 -2
  169. package/public-api.d.ts +12 -0
  170. package/esm2015/lib/core/enum/float-label-type.enum.js +0 -7
  171. package/esm2015/lib/core/enum/input-text-type.enum.js +0 -6
  172. package/esm2015/lib/core/model/numerical-range.js +0 -14
  173. package/lib/components/co-dialog/co-dialog.component.scss +0 -0
  174. package/lib/components/drop-down-list/drop-down-list.component.scss +0 -0
  175. package/lib/components/input-number-picker/input-number-picker.component.scss +0 -49
  176. package/lib/core/enum/float-label-type.enum.d.ts +0 -5
  177. package/lib/core/enum/input-text-type.enum.d.ts +0 -4
  178. package/lib/core/model/numerical-range.d.ts +0 -7
  179. package/lib/style/_extendables.scss +0 -32
  180. package/lib/style/_responsiveness.mixins.scss +0 -64
  181. package/lib/style/_responsiveness.scss +0 -4
  182. package/lib/style/_transition.mixins.scss +0 -21
@@ -0,0 +1,37 @@
1
+ @include export-module('cc-validation-error-layout') {
2
+ .co-validation-error {
3
+ font-family: $cc-validation-error-font-family;
4
+ font-size: $cc-validation-error-font-size;
5
+ display: block;
6
+ position: absolute;
7
+ padding: $cc-validation-error-padding;
8
+ min-height: 20px;
9
+ min-width: 200px;
10
+ z-index: 999999;
11
+ border-radius: $cc-validation-error-border-radius;
12
+ border: $cc-validation-error-border;
13
+
14
+ &::after,
15
+ &::before {
16
+ border: solid transparent;
17
+ content: " ";
18
+ display: block;
19
+ height: 0;
20
+ pointer-events: none;
21
+ position: absolute;
22
+ width: 0;
23
+ bottom: 100%;
24
+ }
25
+ &::after {
26
+ left: 20px;
27
+ border-width: 10px;
28
+ }
29
+ &::before {
30
+ margin-left: 12px;
31
+ border-width: 8px;
32
+ z-index: 1;
33
+ }
34
+ }
35
+ }
36
+
37
+
@@ -0,0 +1,9 @@
1
+ $cc-validation-error-font-family: $cc-font-family !default;
2
+ $cc-validation-error-font-size: $cc-font-size-default !default;
3
+ $cc-validation-error-padding: 10px !default;
4
+ $cc-validation-error-background-color: $cc-color-error !default;
5
+ $cc-validation-error-color: white !default;
6
+ $cc-validation-error-border: 2px solid !default;
7
+ $cc-validation-error-border-color: black !default;
8
+ $cc-validation-error-border-radius: 5px !default;
9
+
@@ -0,0 +1,21 @@
1
+ @include export-module('cc-validation-error-theme') {
2
+ .co-validation-error {
3
+ background-color: $cc-validation-error-background-color;
4
+ color: $cc-validation-error-color;
5
+ border-color: $cc-validation-error-border-color;
6
+
7
+ &::after {
8
+ border-bottom-color: $cc-validation-error-border-color;
9
+ }
10
+
11
+ &::before {
12
+ border-bottom-color: $cc-validation-error-background-color;
13
+ }
14
+
15
+ @if $cc-validation-error-border == "none" {
16
+ &::after {
17
+ display: none;
18
+ }
19
+ }
20
+ }
21
+ }
@@ -0,0 +1,5 @@
1
+ @import "../../../style/mixin";
2
+ @import "../../../style/variables";
3
+ @import "./material-definition";
4
+ @import "./layout";
5
+ @import "./theme";
@@ -0,0 +1,4 @@
1
+ export declare class ValidationErrorComponent {
2
+ error: string;
3
+ showClass(): boolean;
4
+ }
@@ -0,0 +1,2 @@
1
+ export declare class ValidationErrorModule {
2
+ }
@@ -1,140 +1,83 @@
1
1
  @import 'variables';
2
- @import 'responsiveness.mixins';
3
2
 
4
- @mixin icon-wrapper($maxWidthIcon) {
5
- height: $maxWidthIcon;
6
- max-width: $maxWidthIcon;
7
- align-items: center;
8
- border-radius: 5px 0 0 5px;
9
- }
10
-
11
- @mixin input($height: $item-size, $maxWidthIconWrapper: $item-size) {
12
- display: flex;
13
- flex-shrink: 0;
14
- &:not(.custom-width) {
15
- width: 100%;
16
- }
17
- &.half-width {
18
- width: $input-width/2;
19
- }
20
- max-width: 100%;
3
+ @mixin input() {
4
+ display: block;
21
5
  position: relative;
22
- height: $height;
23
- //margin-bottom: $size_input_margin_bottom;
24
- @include screen-xs() {
25
- &:not(.custom-width) {
26
- width: 100%;
27
- }
28
- }
29
- > * {
30
- background: none;
31
- + * {
32
- margin-left: 1px;
33
- }
34
- }
35
- .icon-wrapper {
36
- @include icon-wrapper($maxWidthIconWrapper);
37
- }
38
- > icon {
39
- width: $icon-size-small;
40
- height: $icon-size-small;
41
- svg {
42
- height: initial;
43
- }
44
- &:hover {
45
- cursor: pointer;
46
- }
47
- [fill] {
48
- fill: $color_icons_dark;
49
- }
50
- }
51
- > div {
52
- position: relative;
53
- padding: 0 $distance_small;
54
- display: flex;
55
- flex-direction: column;
56
- justify-content: center;
57
- flex: 1;
58
- > * {
59
- flex: none;
60
- padding: 0;
6
+ .required-indicator {
7
+ display: none;
8
+ position: absolute;
9
+ top: $cc-input-required-mark-width-height;
10
+ right: $cc-input-required-mark-width-height;
11
+ pointer-events: none;
12
+ &:before {
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ content: "\2713";
17
+ width: $cc-input-required-mark-width-height;
18
+ height: $cc-input-required-mark-width-height;
19
+ background-color: white;
20
+ color: $cc-color-valid;
21
+ }
22
+ }
23
+ &:not(.custom-height) {
24
+ height: $cc-item-size - 8px;
25
+ padding-bottom: 7px;
26
+ border-bottom: 1px solid;
27
+ border-color: $cc-color-border;
28
+ }
29
+ &.required {
30
+ .required-indicator {
31
+ display: flex;
32
+ }
33
+ &.invalid, &:not(.hasvalue) {
34
+ .required-indicator:before {
35
+ content: "\002A";
36
+ color: $cc-color-error;
37
+ }
61
38
  }
62
39
  }
63
- &:not(.no-validation) {
64
- &:after {
65
- content: '';
66
- width: 4px;
67
- height: 4px;
68
- position: absolute;
69
- top: 4px;
70
- right: 4px;
71
- border: 1px solid $color_form_input_border;
72
- }
40
+ &.has-own-label {
73
41
  label {
74
- color: $color-label;
75
- }
76
- &.required:not(.hasvalue) {
77
- &:after {
78
- border: 1px solid transparentize($color_input_indicator_mandatory, 0.5);
79
- background: $color_input_indicator_mandatory;
80
- width: 4px;
81
- height: 4px;
82
- }
83
- }
84
- &.invalid,
85
- &.valid {
86
- &:after {
87
- border: 0;
88
- width: 5px;
89
- height: 5px;
90
- }
91
- }
92
- &.invalid,
93
- &.touched-invalid {
94
- &:after {
95
- background: $color-error;
96
- }
97
- }
98
- &.valid {
99
- &:after {
100
- background: $color_valid;
42
+ width: 100%;
43
+ color: $cc-color-label;
44
+ font-size: 13px;
45
+ position: absolute;
46
+ top: $cc-item-size / 2;
47
+ transform: translateY(-50%);
48
+ transform-origin: top left;
49
+ pointer-events: none;
50
+ z-index: 1;
51
+ transition: all .2s;
52
+ overflow: hidden;
53
+ white-space: nowrap;
54
+ text-overflow: ellipsis;
55
+ }
56
+ &.cc-input-focused, &.hasvalue {
57
+ label {
58
+ color: $cc-color-action;
59
+ transform: translateY(-($cc-item-size / 2)) scale(0.92);
101
60
  }
102
61
  }
103
62
  }
104
- &.input-typer {
105
- width: 100%;
106
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
63
+ &:before, &:after {
64
+ content: "";
65
+ position: absolute;
66
+ bottom: 0;
67
+ height: 2px;
68
+ transition: .2s cubic-bezier(0.4, 0, 0.4, 1);
69
+ width: 0;
70
+ background: $cc-color-action;
107
71
  }
108
- &.triangle-down {
109
- &.search {
110
- .input-text-content-wrapper {
111
- &:after {
112
- border-top: 4px solid $color-input-search-triangle;
113
- }
114
- }
115
- }
116
- .input-text-content-wrapper {
117
- position: relative;
118
- &:after {
119
- content: '';
120
- width: 0;
121
- height: 0;
122
- position: absolute;
123
- bottom: 2px;
124
- right: 2px;
125
-
126
- @include bottom-right-triangle(4px, $color_main);
127
- }
128
- }
129
- &.sequence-input {
130
- .input-text-content-wrapper:after {
131
- border-top-color: $color-input-sequence;
132
- }
133
- }
134
- &.lov-input {
135
- .input-text-content-wrapper:after {
136
- border-top-color: $color-input-lov;
137
- }
72
+ &:before {
73
+ left: 50%;
74
+ }
75
+ &:after {
76
+ right: 50%;
77
+ }
78
+ &.cc-input-focused {
79
+ &:before, &:after {
80
+ width: 50%;
138
81
  }
139
82
  }
140
83
  }
@@ -145,157 +88,3 @@
145
88
  ::-moz-placeholder {@content}
146
89
  :-ms-input-placeholder {@content}
147
90
  }
148
-
149
- // part of the input-text label animation
150
- @mixin label-center {
151
- @include placeholder {
152
- opacity: 0;
153
- transition: opacity 0.3s;
154
- }
155
- label {
156
- cursor: text;
157
- position: relative;
158
- top: 8px;
159
- font-size: $font-size-small;
160
- }
161
- }
162
-
163
- // part of the input-text label animation
164
- @mixin label-top {
165
- @include placeholder {
166
- opacity: 1;
167
- }
168
- label {
169
- cursor: default;
170
- top: 0;
171
- font-size: $font-size-input-label;
172
- }
173
- }
174
-
175
- @mixin divider-vertical {
176
- background: $color-light-accent;
177
- flex: 0 0!important;
178
- padding: 0!important;
179
- height: 80%!important;
180
- flex-basis: 1px!important;
181
- margin-top: 5px!important;
182
- }
183
-
184
- @mixin divider-horizontal {
185
- background: $color-light-accent;
186
- height: 1px;
187
- margin: 0 10px;
188
- }
189
-
190
- @mixin text-color-sequence {
191
- .input-text-input-field {
192
- color: $color-input-sequence;
193
- }
194
- }
195
-
196
- @mixin text-color-lov {
197
- .input-text-input-field {
198
- color: $color-input-lov;
199
- }
200
- }
201
-
202
- @mixin text-bold {
203
- .input-text-input-field {
204
- font-weight: bold;
205
- }
206
- }
207
-
208
- @mixin double-height {
209
- min-height: $item-size * 2;
210
- }
211
-
212
- @mixin bottom-right-triangle($size, $color) {
213
- border-left: $size solid transparent;
214
- border-right: $size solid transparent;
215
- border-top: $size solid $color;
216
- transform: rotate(-45deg);
217
- }
218
-
219
- @mixin label-animate {
220
- transition: font-size 0.2s ease-out, top 0.2s ease-out;
221
- }
222
-
223
- @mixin icon-fill($color) {
224
- [fill] {
225
- fill : $color;
226
- }
227
- }
228
-
229
- @mixin box-shadow-inside($horizontal, $vertical, $blur, $spread, $shadowColor) {
230
- box-shadow: inset $horizontal $vertical $blur $spread $shadowColor;
231
- }
232
-
233
- @mixin popup-item {
234
- cursor: pointer;
235
- height: 50px;
236
- display: flex;
237
- flex-direction: row;
238
- align-items: center;
239
- border-radius: 5px;
240
- padding: 10px;
241
- co-icon {
242
- height: 40px;
243
- width: 40px;
244
- }
245
-
246
- &:hover {
247
- background-color: $color-active-accent;
248
- color: white;
249
- ::ng-deep co-icon {
250
- [fill] {
251
- fill: white;
252
- }
253
- }
254
- }
255
- }
256
-
257
- @mixin popup-with-clickable-items($width: 300px) {
258
- overflow: hidden;
259
- display: block;
260
- width: $width;
261
- border-radius: 5px;
262
- background: white;
263
- box-shadow: 1px 1px 10px 1px $color-box-shadow;
264
- padding: 10px;
265
- ::ng-deep .label {
266
- font-weight: bold;
267
- height: 50px;
268
- display: flex;
269
- align-items: center;
270
- font-size: 13px;
271
- }
272
- ::ng-deep .item {
273
- @include popup-item;
274
- }
275
- }
276
-
277
- // Trick to make the scrollbar appear smaller while actually being larger and remaining easy to click.
278
- @mixin scrollbar-gradient($pos, $color, $stopPoint) {
279
- background: linear-gradient($pos, $color, $color $stopPoint, transparent $stopPoint, transparent);
280
- }
281
-
282
- // A complete styling package for a scrollbar with given colors and "gradient stop point" (<- defines the visible vs true size of the bar)
283
- @mixin scrollbar-full-style($thumbColor, $trackColor, $stopPoint) {
284
- &::-webkit-scrollbar-thumb:vertical {
285
- @include scrollbar-gradient(to left, $thumbColor, $stopPoint);
286
- }
287
- &::-webkit-scrollbar-track:vertical {
288
- @include scrollbar-gradient(to left, $trackColor, $stopPoint);
289
- }
290
- &::-webkit-scrollbar-thumb:horizontal {
291
- @include scrollbar-gradient(to top, $thumbColor, $stopPoint);
292
- }
293
- &::-webkit-scrollbar-track:horizontal {
294
- @include scrollbar-gradient(to top, $trackColor, $stopPoint);
295
- }
296
- }
297
-
298
- @mixin level($level) {
299
- position: relative;
300
- z-index: $level;
301
- }
@@ -101,3 +101,5 @@ $cc-slow-transition-time: 1s !default;
101
101
  $cc-pretty-hover-transition-time: 0.14s !default;
102
102
 
103
103
  $cc-font-size-value-text: 13px !default;
104
+
105
+ $cc-input-required-mark-width-height: 7px;
@@ -1,9 +1,9 @@
1
1
  // NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
2
2
 
3
3
  // Core styles that can be used to apply material design treatments to any element.
4
- @import 'style/elevation';
4
+ //@import 'style/elevation';
5
5
  @import 'ripple/co-ripple';
6
- @import "theming/palette";
6
+ //@import "theming/palette";
7
7
 
8
8
 
9
9
  // Mixin that renders all of the core styles that are not theme-dependent.
@@ -14,4 +14,4 @@
14
14
  // Mixin that renders all of the core styles that depend on the theme.
15
15
  @mixin mat-core-theme($theme) {
16
16
  @include mat-ripple-theme($theme);
17
- }
17
+ }
@@ -1,16 +1,16 @@
1
1
  // Top-level material2 scss barrel theme initialization for our CoreComponents lib.
2
2
  @import "core";
3
- @import "theming/theming";
3
+ //@import "theming/theming";
4
4
 
5
5
  /* Override Material2 variables */
6
- $mat-ripple-color-opacity: 0.25;
6
+ //$mat-ripple-color-opacity: 0.25;
7
7
 
8
8
  /* Include material core */
9
- @include mat-core();
10
-
11
- $primary: mat-palette($mat-purple, 700, 500, 800);
12
- $accent: mat-palette($mat-green, A200, A100, A400);
13
- $theme: mat-dark-theme($primary, $accent);
14
- @include mat-core-theme(
15
- mat-dark-theme($primary, $accent)
16
- );
9
+ //@include mat-core();
10
+ //
11
+ //$primary: mat-palette($mat-purple, 700, 500, 800);
12
+ //$accent: mat-palette($mat-green, A200, A100, A400);
13
+ //$theme: mat-dark-theme($primary, $accent);
14
+ //@include mat-core-theme(
15
+ // mat-dark-theme($primary, $accent)
16
+ //);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/corecomponents_v12",
3
- "version": "12.0.15",
3
+ "version": "12.0.18",
4
4
  "description": "Colijn IT core components for Angular 12",
5
5
  "private": false,
6
6
  "peerDependencies": {
@@ -20,7 +20,10 @@
20
20
  "@syncfusion/ej2-angular-splitbuttons": "~19.3.45",
21
21
  "@syncfusion/ej2-angular-richtexteditor": "~19.3.45",
22
22
  "@syncfusion/ej2-base": "~19.3.43",
23
- "@syncfusion/ej2-popups": "~19.3.43"
23
+ "@syncfusion/ej2-popups": "~19.3.43",
24
+ "@types/three": ">=0.125.0",
25
+ "@tweenjs/tween.js": ">=17.2.0",
26
+ "three": ">=0.125.0"
24
27
  },
25
28
  "dependencies": {
26
29
  "tslib": "^2.3.0"
package/public-api.d.ts CHANGED
@@ -16,10 +16,13 @@ export * from './lib/components/co-sidebar/co-sidebar.module';
16
16
  export * from './lib/components/co-sidebar/co-sidebar.component';
17
17
  export * from './lib/components/co-toggle/co-toggle.module';
18
18
  export * from './lib/components/co-toggle/co-toggle.component';
19
+ export * from './lib/components/collapsible/collapsible.module';
20
+ export * from './lib/components/collapsible/collapsible.component';
19
21
  export * from './lib/components/drop-down-list/drop-down.module';
20
22
  export * from './lib/components/drop-down-list/drop-down-list.component';
21
23
  export * from './lib/components/form/form.module';
22
24
  export * from './lib/components/form/form.component';
25
+ export * from './lib/core/service/form-master.service';
23
26
  export * from './lib/components/grid/co-grid.module';
24
27
  export * from './lib/components/grid/co-grid.component';
25
28
  export * from './lib/components/icon/icon.module';
@@ -40,6 +43,8 @@ export * from './lib/components/input-radio-button/input-radio-button.module';
40
43
  export * from './lib/components/input-radio-button/input-radio-button.component';
41
44
  export * from './lib/components/input-text/input-text.module';
42
45
  export * from './lib/components/input-text/input-text.component';
46
+ export * from './lib/components/input-textarea/input-textarea.module';
47
+ export * from './lib/components/input-textarea/input-textarea.component';
43
48
  export * from './lib/components/level-indicator/level-indicator.module';
44
49
  export * from './lib/components/level-indicator/level-indicator.component';
45
50
  export * from './lib/components/multi-select-list/multi-select-list.module';
@@ -59,3 +64,10 @@ export * from './lib/components/icon/icon-cache.service';
59
64
  export * from './lib/components/base/component-interface-name';
60
65
  export * from './lib/components/co-rich-text-editor/co-rich-text-editor.module';
61
66
  export * from './lib/components/co-rich-text-editor/co-rich-text-editor.component';
67
+ export * from './lib/components/input-listbox/input-listbox.module';
68
+ export * from './lib/components/input-listbox/input-listbox.component';
69
+ export * from './lib/components/simple-grid/simple-grid-column.directive';
70
+ export * from './lib/components/simple-grid/simple-grid.component';
71
+ export * from './lib/components/simple-grid/simple-grid.module';
72
+ export * from './lib/components/carousel-3d/carousel-3d.component';
73
+ export * from './lib/components/carousel-3d/carousel-3d.module';
@@ -1,7 +0,0 @@
1
- export var FloatLabelTypeEnum;
2
- (function (FloatLabelTypeEnum) {
3
- FloatLabelTypeEnum["Never"] = "Never";
4
- FloatLabelTypeEnum["Always"] = "Always";
5
- FloatLabelTypeEnum["Auto"] = "Auto";
6
- })(FloatLabelTypeEnum || (FloatLabelTypeEnum = {}));
7
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxvYXQtbGFiZWwtdHlwZS5lbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZWNvbXBvbmVudHMvc3JjL2xpYi9jb3JlL2VudW0vZmxvYXQtbGFiZWwtdHlwZS5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLGtCQUlYO0FBSkQsV0FBWSxrQkFBa0I7SUFDMUIscUNBQWUsQ0FBQTtJQUNmLHVDQUFpQixDQUFBO0lBQ2pCLG1DQUFhLENBQUE7QUFDakIsQ0FBQyxFQUpXLGtCQUFrQixLQUFsQixrQkFBa0IsUUFJN0IiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBGbG9hdExhYmVsVHlwZUVudW0ge1xyXG4gICAgTmV2ZXIgPSBcIk5ldmVyXCIsXHJcbiAgICBBbHdheXMgPSBcIkFsd2F5c1wiLFxyXG4gICAgQXV0byA9IFwiQXV0b1wiLFxyXG59XHJcbiJdfQ==
@@ -1,6 +0,0 @@
1
- export var InputTextType;
2
- (function (InputTextType) {
3
- InputTextType["Text"] = "text";
4
- InputTextType["Email"] = "email";
5
- })(InputTextType || (InputTextType = {}));
6
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtdGV4dC10eXBlLmVudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlY29tcG9uZW50cy9zcmMvbGliL2NvcmUvZW51bS9pbnB1dC10ZXh0LXR5cGUuZW51bS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQU4sSUFBWSxhQUdYO0FBSEQsV0FBWSxhQUFhO0lBQ3JCLDhCQUFhLENBQUE7SUFDYixnQ0FBZSxDQUFBO0FBQ25CLENBQUMsRUFIVyxhQUFhLEtBQWIsYUFBYSxRQUd4QiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBlbnVtIElucHV0VGV4dFR5cGUge1xyXG4gICAgVGV4dCA9IFwidGV4dFwiLFxyXG4gICAgRW1haWwgPSBcImVtYWlsXCJcclxufSJdfQ==
@@ -1,14 +0,0 @@
1
- // Represents a numerical range with a lower- and upper bound.
2
- export class NumericalRange {
3
- constructor(lowerBound, upperBound) {
4
- this.lowerBound = lowerBound;
5
- this.upperBound = upperBound;
6
- }
7
- toString() {
8
- return "[" + this.lowerBound + ", " + this.upperBound + "]";
9
- }
10
- equals(otherRange) {
11
- return otherRange && this.lowerBound === otherRange.lowerBound && this.upperBound === otherRange.upperBound;
12
- }
13
- }
14
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtZXJpY2FsLXJhbmdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZWNvbXBvbmVudHMvc3JjL2xpYi9jb3JlL21vZGVsL251bWVyaWNhbC1yYW5nZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw4REFBOEQ7QUFDOUQsTUFBTSxPQUFPLGNBQWM7SUFLdkIsWUFBWSxVQUFrQixFQUFFLFVBQWtCO1FBQzlDLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO0lBQ2pDLENBQUM7SUFFTSxRQUFRO1FBQ1gsT0FBTyxHQUFHLEdBQUcsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsR0FBRyxHQUFHLENBQUM7SUFDaEUsQ0FBQztJQUVNLE1BQU0sQ0FBQyxVQUEwQjtRQUNwQyxPQUFPLFVBQVUsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLFVBQVUsQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxVQUFVLENBQUMsVUFBVSxDQUFDO0lBQ2hILENBQUM7Q0FDSiIsInNvdXJjZXNDb250ZW50IjpbIi8vIFJlcHJlc2VudHMgYSBudW1lcmljYWwgcmFuZ2Ugd2l0aCBhIGxvd2VyLSBhbmQgdXBwZXIgYm91bmQuXHJcbmV4cG9ydCBjbGFzcyBOdW1lcmljYWxSYW5nZSB7XHJcbiAgICBwdWJsaWMgbG93ZXJCb3VuZDogbnVtYmVyO1xyXG4gICAgcHVibGljIHVwcGVyQm91bmQ6IG51bWJlcjtcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihsb3dlckJvdW5kPzogbnVtYmVyLCB1cHBlckJvdW5kPzogbnVtYmVyKVxyXG4gICAgY29uc3RydWN0b3IobG93ZXJCb3VuZDogbnVtYmVyLCB1cHBlckJvdW5kOiBudW1iZXIpIHtcclxuICAgICAgICB0aGlzLmxvd2VyQm91bmQgPSBsb3dlckJvdW5kO1xyXG4gICAgICAgIHRoaXMudXBwZXJCb3VuZCA9IHVwcGVyQm91bmQ7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIHRvU3RyaW5nKCk6IHN0cmluZyB7XHJcbiAgICAgICAgcmV0dXJuIFwiW1wiICsgdGhpcy5sb3dlckJvdW5kICsgXCIsIFwiICsgdGhpcy51cHBlckJvdW5kICsgXCJdXCI7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGVxdWFscyhvdGhlclJhbmdlOiBOdW1lcmljYWxSYW5nZSk6IGJvb2xlYW4ge1xyXG4gICAgICAgIHJldHVybiBvdGhlclJhbmdlICYmIHRoaXMubG93ZXJCb3VuZCA9PT0gb3RoZXJSYW5nZS5sb3dlckJvdW5kICYmIHRoaXMudXBwZXJCb3VuZCA9PT0gb3RoZXJSYW5nZS51cHBlckJvdW5kO1xyXG4gICAgfVxyXG59Il19
File without changes
@@ -1,49 +0,0 @@
1
- @import "../../style/_input.mixins";
2
-
3
- :host {
4
- position: relative;
5
- display: flex;
6
- flex-direction: column;
7
- align-items: center !important;
8
- justify-content: center !important;
9
-
10
- &.horizontal {
11
- display: flex;
12
- flex-direction: row-reverse;
13
- }
14
-
15
- &.show-buttons-on-focus-only {
16
- co-button {
17
- @include level(20);
18
- position: absolute !important;
19
- margin-left: auto;
20
- &.plus-operator {
21
- top: -38px;
22
- }
23
- &.minus-operator {
24
- bottom: -38px;
25
- }
26
- }
27
- }
28
-
29
- &.has-label {
30
- input-text ::ng-deep {
31
- input {
32
- position: relative;
33
- bottom: 2px;
34
- text-align: left; // center is default
35
- }
36
- }
37
- }
38
-
39
- co-input-text {
40
- width: 60px;
41
- }
42
-
43
- co-button {
44
- font-size: 22px;
45
- margin: 5px;
46
- height: 26px;
47
- padding: 0;
48
- }
49
- }
@@ -1,5 +0,0 @@
1
- export declare enum FloatLabelTypeEnum {
2
- Never = "Never",
3
- Always = "Always",
4
- Auto = "Auto"
5
- }
@@ -1,4 +0,0 @@
1
- export declare enum InputTextType {
2
- Text = "text",
3
- Email = "email"
4
- }
@@ -1,7 +0,0 @@
1
- export declare class NumericalRange {
2
- lowerBound: number;
3
- upperBound: number;
4
- constructor(lowerBound?: number, upperBound?: number);
5
- toString(): string;
6
- equals(otherRange: NumericalRange): boolean;
7
- }