@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.
- package/bundles/colijnit-corecomponents_v12.umd.js +1099 -277
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.d.ts +9 -8
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/colijnit-corecomponents_v12.js +10 -9
- package/esm2015/lib/components/base/base-input.component.js +40 -20
- package/esm2015/lib/components/carousel-3d/carousel-3d.component.js +313 -0
- package/esm2015/lib/components/carousel-3d/carousel-3d.module.js +19 -0
- package/esm2015/lib/components/carousel-3d/carouselItem.js +54 -0
- package/esm2015/lib/components/co-dialog/co-dialog.component.js +46 -48
- package/esm2015/lib/components/co-dialog/co-dialog.module.js +7 -4
- package/esm2015/lib/components/co-dialog-prompt/co-dialog-prompt.component.js +6 -6
- package/esm2015/lib/components/co-kanban/co-kanban.component.js +8 -7
- package/esm2015/lib/components/co-rich-text-editor/co-rich-text-editor.component.js +2 -2
- package/esm2015/lib/components/collapsible/collapsible.component.js +58 -0
- package/esm2015/lib/components/collapsible/collapsible.module.js +17 -0
- package/esm2015/lib/components/drop-down-list/drop-down-list.component.js +30 -8
- package/esm2015/lib/components/drop-down-list/drop-down.module.js +4 -2
- package/esm2015/lib/components/form/form.component.js +2 -21
- package/esm2015/lib/components/form/form.module.js +4 -4
- package/esm2015/lib/components/grid/base/base-grid.component.js +1 -1
- package/esm2015/lib/components/grid/base/base-selection-grid.component.js +1 -1
- package/esm2015/lib/components/grid/co-grid.component.js +2 -2
- package/esm2015/lib/components/input-checkbox/input-checkbox.component.js +15 -5
- package/esm2015/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.js +6 -14
- package/esm2015/lib/components/input-combo-box/input-combo-box.component.js +24 -29
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +10 -7
- package/esm2015/lib/components/input-listbox/input-listbox.component.js +87 -0
- package/esm2015/lib/components/input-listbox/input-listbox.module.js +25 -0
- package/esm2015/lib/components/input-number-picker/input-number-picker.component.js +55 -30
- package/esm2015/lib/components/input-number-picker/input-number-picker.module.js +5 -3
- package/esm2015/lib/components/input-radio-button/input-radio-button.component.js +13 -5
- package/esm2015/lib/components/input-text/input-text.component.js +22 -81
- package/esm2015/lib/components/input-text/input-text.module.js +16 -13
- package/esm2015/lib/components/input-textarea/input-textarea.component.js +62 -0
- package/esm2015/lib/components/input-textarea/input-textarea.module.js +23 -0
- package/esm2015/lib/components/multi-select-list/multi-select-list.component.js +37 -9
- package/esm2015/lib/components/multi-select-list/multi-select-list.module.js +4 -2
- package/esm2015/lib/components/pivot/co-pivot.component.js +2 -2
- package/esm2015/lib/components/simple-grid/simple-grid-column.directive.js +36 -0
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +112 -0
- package/esm2015/lib/components/simple-grid/simple-grid.module.js +24 -0
- package/esm2015/lib/components/validation-error/validation-error.component.js +23 -0
- package/esm2015/lib/components/validation-error/validation-error.module.js +19 -0
- package/esm2015/public-api.js +13 -1
- package/fesm2015/colijnit-corecomponents_v12.js +1176 -337
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/base/base-input.component.d.ts +14 -9
- package/lib/components/button/style/_co-ripple.scss +69 -0
- package/lib/components/button/style/_layout.scss +7 -4
- package/lib/components/button/style/_material-definition.scss +1 -0
- package/lib/components/button/style/_theme.scss +2 -27
- package/lib/components/button/style/material.scss +18 -0
- package/lib/components/button-drop-down/style/_layout.scss +0 -2
- package/lib/components/button-drop-down/style/_theme.scss +0 -2
- package/lib/components/button-drop-down/style/material.scss +1 -0
- package/lib/components/carousel-3d/carousel-3d.component.d.ts +55 -0
- package/lib/components/carousel-3d/carousel-3d.module.d.ts +2 -0
- package/lib/components/carousel-3d/carouselItem.d.ts +13 -0
- package/lib/components/carousel-3d/style/_layout.scss +62 -0
- package/lib/components/carousel-3d/style/_material-definition.scss +6 -0
- package/lib/components/carousel-3d/style/_theme.scss +4 -0
- package/lib/components/carousel-3d/style/material.scss +5 -0
- package/lib/components/co-dialog/co-dialog.component.d.ts +6 -13
- package/lib/components/co-dialog/style/_layout.scss +44 -0
- package/lib/components/co-dialog/style/_material-definition.scss +23 -0
- package/lib/components/co-dialog/style/_theme.scss +24 -0
- package/lib/components/co-dialog/style/material.scss +5 -0
- package/lib/components/co-dialog-prompt/co-dialog-prompt.component.d.ts +2 -2
- package/lib/components/co-kanban/co-kanban.component.d.ts +1 -0
- package/lib/components/co-kanban/style/_layout.scss +48 -0
- package/lib/components/co-kanban/style/_material-definition.scss +25 -0
- package/lib/components/co-kanban/style/_theme.scss +3 -0
- package/lib/components/co-kanban/style/material.scss +14 -0
- package/lib/components/co-rich-text-editor/co-rich-text-editor.component.d.ts +1 -1
- package/lib/components/co-rich-text-editor/style/_layout.scss +0 -2
- package/lib/components/co-rich-text-editor/style/_theme.scss +0 -2
- package/lib/components/co-rich-text-editor/style/material.scss +1 -0
- package/lib/components/co-toggle/co-toggle.component.scss +1 -0
- package/lib/components/collapsible/collapsible.component.d.ts +16 -0
- package/lib/components/collapsible/collapsible.module.d.ts +2 -0
- package/lib/components/collapsible/style/_layout.scss +50 -0
- package/lib/components/collapsible/style/_material-definition.scss +9 -0
- package/lib/components/collapsible/style/_theme.scss +5 -0
- package/lib/components/collapsible/style/material.scss +5 -0
- package/lib/components/drop-down-list/drop-down-list.component.d.ts +12 -2
- package/lib/components/drop-down-list/style/_layout.scss +8 -3
- package/lib/components/drop-down-list/style/_theme.scss +0 -2
- package/lib/components/drop-down-list/style/material.scss +2 -0
- package/lib/components/form/form.component.d.ts +0 -1
- package/lib/components/grid/base/base-selection-grid.component.d.ts +1 -2
- package/lib/components/grid/co-grid.component.d.ts +1 -1
- package/lib/components/grid/style/_layout.scss +0 -2
- package/lib/components/grid/style/_theme.scss +0 -2
- package/lib/components/grid/style/material.scss +1 -0
- package/lib/components/input-checkbox/input-checkbox.component.d.ts +9 -2
- package/lib/components/input-checkbox/style/_layout.scss +0 -2
- package/lib/components/input-checkbox/style/_theme.scss +0 -2
- package/lib/components/input-checkbox/style/material.scss +1 -0
- package/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.d.ts +4 -6
- package/lib/components/input-checkbox-multi-select/style/_layout.scss +0 -2
- package/lib/components/input-checkbox-multi-select/style/_theme.scss +0 -2
- package/lib/components/input-checkbox-multi-select/style/material.scss +1 -0
- package/lib/components/input-combo-box/input-combo-box.component.d.ts +6 -7
- package/lib/components/input-combo-box/style/_layout.scss +10 -3
- package/lib/components/input-combo-box/style/_material-definition.scss +0 -7
- package/lib/components/input-combo-box/style/_theme.scss +0 -2
- package/lib/components/input-combo-box/style/material.scss +9 -0
- package/lib/components/input-date-picker/input-date-picker.component.d.ts +4 -3
- package/lib/components/input-date-picker/style/_layout.scss +4 -3
- package/lib/components/input-date-picker/style/_theme.scss +0 -2
- package/lib/components/input-date-picker/style/material.scss +2 -0
- package/lib/components/input-listbox/input-listbox.component.d.ts +25 -0
- package/lib/components/input-listbox/input-listbox.module.d.ts +2 -0
- package/lib/components/input-listbox/style/_layout.scss +22 -0
- package/lib/components/input-listbox/style/_material-definition.scss +10 -0
- package/lib/components/input-listbox/style/_theme.scss +12 -0
- package/lib/components/input-listbox/style/material.scss +6 -0
- package/lib/components/input-number-picker/input-number-picker.component.d.ts +9 -5
- package/lib/components/input-number-picker/style/_layout.scss +41 -0
- package/lib/components/input-number-picker/style/_material-definition.scss +17 -0
- package/lib/components/input-number-picker/style/_theme.scss +20 -0
- package/lib/components/input-number-picker/style/material.scss +5 -0
- package/lib/components/input-radio-button/input-radio-button.component.d.ts +7 -2
- package/lib/components/input-radio-button/style/_layout.scss +0 -2
- package/lib/components/input-radio-button/style/_theme.scss +0 -2
- package/lib/components/input-radio-button/style/material.scss +1 -0
- package/lib/components/input-search/style/_layout.scss +39 -0
- package/lib/components/input-search/style/_material-definition.scss +6 -0
- package/lib/components/input-search/style/_theme.scss +6 -0
- package/lib/components/input-search/style/material.scss +5 -0
- package/lib/components/input-text/input-text.component.d.ts +6 -30
- package/lib/components/input-text/style/_layout.scss +14 -3
- package/lib/components/input-text/style/_material-definition.scss +4 -3
- package/lib/components/input-text/style/_theme.scss +0 -2
- package/lib/components/input-text/style/material.scss +3 -0
- package/lib/components/input-textarea/input-textarea.component.d.ts +18 -0
- package/lib/components/input-textarea/input-textarea.module.d.ts +2 -0
- package/lib/components/input-textarea/style/_layout.scss +20 -0
- package/lib/components/input-textarea/style/_material-definition.scss +4 -0
- package/lib/components/input-textarea/style/_theme.scss +8 -0
- package/lib/components/input-textarea/style/material.scss +7 -0
- package/lib/components/multi-select-list/multi-select-list.component.d.ts +13 -2
- package/lib/components/multi-select-list/style/_layout.scss +10 -3
- package/lib/components/multi-select-list/style/_theme.scss +0 -2
- package/lib/components/multi-select-list/style/material.scss +2 -0
- package/lib/components/pivot/co-pivot.component.d.ts +2 -2
- package/lib/components/pivot/style/_layout.scss +0 -2
- package/lib/components/pivot/style/_theme.scss +0 -2
- package/lib/components/pivot/style/material.scss +1 -0
- package/lib/components/simple-grid/simple-grid-column.directive.d.ts +18 -0
- package/lib/components/simple-grid/simple-grid.component.d.ts +26 -0
- package/lib/components/simple-grid/simple-grid.module.d.ts +2 -0
- package/lib/components/simple-grid/style/_layout.scss +78 -0
- package/lib/components/simple-grid/style/_material-definition.scss +16 -0
- package/lib/components/simple-grid/style/_theme.scss +15 -0
- package/lib/components/simple-grid/style/material.scss +5 -0
- package/lib/components/validation-error/style/_layout.scss +37 -0
- package/lib/components/validation-error/style/_material-definition.scss +9 -0
- package/lib/components/validation-error/style/_theme.scss +21 -0
- package/lib/components/validation-error/style/material.scss +5 -0
- package/lib/components/validation-error/validation-error.component.d.ts +4 -0
- package/lib/components/validation-error/validation-error.module.d.ts +2 -0
- package/lib/style/_input.mixins.scss +70 -281
- package/lib/style/_variables.scss +2 -0
- package/lib/style/material2/_core.scss +3 -3
- package/lib/style/material2/_material2-scss-barrel.scss +10 -10
- package/package.json +5 -2
- package/public-api.d.ts +12 -0
- package/esm2015/lib/core/enum/float-label-type.enum.js +0 -7
- package/esm2015/lib/core/enum/input-text-type.enum.js +0 -6
- package/esm2015/lib/core/model/numerical-range.js +0 -14
- package/lib/components/co-dialog/co-dialog.component.scss +0 -0
- package/lib/components/drop-down-list/drop-down-list.component.scss +0 -0
- package/lib/components/input-number-picker/input-number-picker.component.scss +0 -49
- package/lib/core/enum/float-label-type.enum.d.ts +0 -5
- package/lib/core/enum/input-text-type.enum.d.ts +0 -4
- package/lib/core/model/numerical-range.d.ts +0 -7
- package/lib/style/_extendables.scss +0 -32
- package/lib/style/_responsiveness.mixins.scss +0 -64
- package/lib/style/_responsiveness.scss +0 -4
- 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
|
+
}
|
|
@@ -1,140 +1,83 @@
|
|
|
1
1
|
@import 'variables';
|
|
2
|
-
@import 'responsiveness.mixins';
|
|
3
2
|
|
|
4
|
-
@mixin
|
|
5
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
height: $
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
-
|
|
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
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
}
|
|
@@ -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
|
-
|
|
4
|
+
//@import 'style/elevation';
|
|
5
5
|
@import 'ripple/co-ripple';
|
|
6
|
-
|
|
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
|
-
|
|
3
|
+
//@import "theming/theming";
|
|
4
4
|
|
|
5
5
|
/* Override Material2 variables */
|
|
6
|
-
|
|
6
|
+
//$mat-ripple-color-opacity: 0.25;
|
|
7
7
|
|
|
8
8
|
/* Include material core */
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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.
|
|
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
|
|
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
|
-
}
|