@colijnit/corecomponents_v12 12.2.10 → 12.2.11

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/bundles/colijnit-corecomponents_v12.umd.js +38 -9
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.metadata.json +1 -1
  4. package/esm2015/lib/components/calendar/calendar-template.component.js +51 -17
  5. package/esm2015/lib/components/co-dialog/co-dialog.component.js +15 -13
  6. package/esm2015/lib/components/co-dialog/co-dialog.module.js +4 -2
  7. package/esm2015/lib/components/form/form.component.js +2 -2
  8. package/esm2015/lib/components/simple-grid/simple-grid.component.js +3 -3
  9. package/fesm2015/colijnit-corecomponents_v12.js +70 -33
  10. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  11. package/lib/components/button/style/_layout.scss +29 -7
  12. package/lib/components/button/style/_material-definition.scss +12 -0
  13. package/lib/components/calendar/calendar-template.component.d.ts +4 -0
  14. package/lib/components/calendar/style/_layout.scss +32 -3
  15. package/lib/components/calendar/style/_material-definition.scss +24 -12
  16. package/lib/components/co-dialog/style/_layout.scss +17 -8
  17. package/lib/components/co-dialog/style/_material-definition.scss +7 -7
  18. package/lib/components/double-calendar/style/_layout.scss +3 -2
  19. package/lib/components/simple-grid/style/_layout.scss +7 -0
  20. package/lib/components/simple-grid/style/_material-definition.scss +2 -0
  21. package/lib/style/_variables.scss +6 -1
  22. package/lib/style/corecomponents-globals.scss +61 -9
  23. package/package.json +1 -1
package/lib/components/button/style/_layout.scss CHANGED
@@ -78,20 +78,42 @@
78
78
  z-index: 1;
79
79
  }
80
80
  &.save-button {
81
- height: $cc-btn-height;
81
+ height: $cc-dialog-btn-size;
82
+ width: $cc-dialog-btn-size;
83
+ border-color: $cc-dialog-btn-border-color;
84
+ border-style: $cc-dialog-btn-border-style;
85
+ border-width: $cc-dialog-btn-border-width;
86
+ background-color: $cc-dialog-btn-background-color;
87
+ padding: $cc-dialog-btn-padding;
88
+ box-shadow: $cc-dialog-btn-box-shadow;
89
+ cursor: pointer;
82
90
  .co-icon {
83
- height: 20px;
84
- width: 20px;
91
+ height: $cc-dialog-btn-icon-size;
92
+ width: $cc-dialog-btn-icon-size;
85
93
  svg {
86
- fill: $cc-color-action;
94
+ fill: $cc-dialog-btn-icon-color;
87
95
  }
88
96
  }
89
97
  }
90
98
  &.close-button {
91
- height: $cc-btn-height;
99
+ height: $cc-dialog-btn-size;
100
+ width: $cc-dialog-btn-size;
101
+ border-color: $cc-dialog-btn-border-color;
102
+ border-style: $cc-dialog-btn-border-style;
103
+ border-width: $cc-dialog-btn-border-width;
104
+ background-color: $cc-dialog-btn-close-background-color;
105
+ padding: $cc-dialog-btn-padding;
106
+ box-shadow: $cc-dialog-btn-box-shadow;
107
+ cursor: pointer;
92
108
  .co-icon {
93
- height: 20px;
94
- width: 20px;
109
+ height: $cc-dialog-btn-icon-size;
110
+ width: $cc-dialog-btn-icon-size;
111
+ svg {
112
+ fill: $cc-dialog-btn-icon-color;
113
+ }
114
+ [fill] {
115
+ fill: $cc-dialog-btn-icon-color;
116
+ }
95
117
  }
96
118
  }
97
119
  }
package/lib/components/button/style/_material-definition.scss CHANGED
@@ -9,3 +9,15 @@ $cc-btn-label-margin: 0 10px !default;
9
9
  $cc-btn-color-dark: $cc-color-dark !default;
10
10
  $cc-btn-place-content: baseline !default;
11
11
  $cc-btn-icon-size: 75% !default;
12
+
13
+ $cc-dialog-btn-size: auto !default;
14
+ $cc-dialog-btn-icon-size: 20px !default;
15
+ $cc-dialog-btn-icon-color: #FFFFFF !default;
16
+ $cc-dialog-btn-border-color: #DCE4EA !default;
17
+ $cc-dialog-btn-border-width: 0 0 0 0 !default;
18
+ $cc-dialog-btn-border-style: solid !default;
19
+ $cc-dialog-btn-padding: 8px !default;
20
+ $cc-dialog-btn-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3) !default;
21
+ $cc-dialog-btn-background-color: #1A73E8 !default;
22
+ $cc-dialog-btn-close-size: auto !default;
23
+ $cc-dialog-btn-close-background-color: #475060 !default;
package/lib/components/calendar/calendar-template.component.d.ts CHANGED
@@ -2,6 +2,8 @@ import { EventEmitter } from "@angular/core";
2
2
  import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
3
3
  export declare class CalendarTemplateComponent {
4
4
  readonly icons: typeof CoreComponentsIcon;
5
+ showWeekNumbers: boolean;
6
+ weekNumbers: number[];
5
7
  locale: string;
6
8
  highlightDaysBetweenDates: boolean;
7
9
  set selectedDate(date: Date);
@@ -53,4 +55,6 @@ export declare class CalendarTemplateComponent {
53
55
  handleMouseOverDay(day: Date): void;
54
56
  private _fillDatesBetweenSelected;
55
57
  private _capitalizeFirstLetter;
58
+ private calculateWeekNumbers;
59
+ getISOWeek(date: Date): number;
56
60
  }
package/lib/components/calendar/style/_layout.scss CHANGED
@@ -42,7 +42,29 @@
42
42
  }
43
43
  }
44
44
  }
45
-
45
+ .calendar-wrapper {
46
+ display: flex;
47
+ .week-wrapper {
48
+ display: grid;
49
+ grid-template-columns: repeat(1, 1fr);
50
+ gap: 1px;
51
+ }
52
+ .week-number {
53
+ height: $cc-co-calendar-week-number-height;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ margin: $cc-co-calendar-week-number-margin;
58
+ font-size: $cc-co-calendar-week-number-font-size;
59
+ width: $cc-co-calendar-week-number-width;
60
+ background: $cc-co-calendar-week-number-background;
61
+ &:first-child {
62
+ height: $cc-co-calendar-week-number-first-height;
63
+ margin: $cc-co-calendar-week-number-first-margin;
64
+ color: $cc-co-calendar-week-number-first-color;
65
+ }
66
+ }
67
+ }
46
68
  .calendar-body {
47
69
  display: grid;
48
70
  grid-template-columns: repeat(7, 1fr);
@@ -56,6 +78,9 @@
56
78
  height: $cc-co-calendar-day-height;
57
79
  margin: $cc-co-calendar-day-margin;
58
80
  cursor: pointer;
81
+ .week-number {
82
+ display: none;
83
+ }
59
84
 
60
85
  &:hover {
61
86
  background-color: $cc-co-calendar-day-hover-background-color;
@@ -89,6 +114,8 @@
89
114
  display: flex;
90
115
  align-items: center;
91
116
  justify-content: center;
117
+ margin: $cc-co-calendar-weekday-margin;
118
+ background: $cc-co-calendar-weekday-background;
92
119
  }
93
120
 
94
121
  .day-number {
@@ -99,15 +126,17 @@
99
126
  .highlighted-day {
100
127
  background-color: $cc-co-calendar-highlighted-day-background-color;
101
128
  color: $cc-co-calendar-highlighted-day-color;
102
-
103
129
  .day-number {
104
130
  font-weight: $cc-co-calendar-highlighted-day-font-weight;
105
131
  }
106
132
  }
107
-
133
+ .highlighted-day + .selected-day {
134
+ border-radius: $cc-co-calendar-selected-day-end-border-radius;
135
+ }
108
136
  .selected-day {
109
137
  background-color: $cc-co-calendar-selected-day-background-color;
110
138
  color: $cc-co-calendar-selected-day-color;
139
+ border-radius: $cc-co-calendar-selected-day-start-border-radius;
111
140
  }
112
141
 
113
142
  .selection-grid {
package/lib/components/calendar/style/_material-definition.scss CHANGED
@@ -4,30 +4,42 @@ $cc-co-calendar-padding: 10px !default;
4
4
  $cc-co-calendar-background-color: white !default;
5
5
  $cc-co-calendar-border-radius: 5px !default;
6
6
  $cc-co-calendar-border: 1px solid #CCCCCC !default;
7
- $cc-co-calendar-header-margin-bottom: 20px !default;
7
+ $cc-co-calendar-header-margin-bottom: 5px !default;
8
8
  $cc-co-calendar-change-month-button-border-radius: 5px !default;
9
- $cc-co-calendar-change-month-button-border: 1px solid #CCCCCC !default;
9
+ $cc-co-calendar-change-month-button-border: 0px solid #CCCCCC !default;
10
10
  $cc-co-calendar-change-month-button-padding: 5px !default;
11
- $cc-co-calendar-header-title-font-size: 14px !default;
12
- $cc-co-calendar-day-height: 36px !default;
11
+ $cc-co-calendar-header-title-font-size: 12px !default;
12
+ $cc-co-calendar-day-height: 34px !default;
13
13
  $cc-co-calendar-day-margin: 2px 0 !default;
14
- $cc-co-calendar-day-hover-background-color: #f0f0f0 !default;
15
- $cc-co-calendar-day-hover-color: black !default;
14
+ $cc-co-calendar-day-hover-background-color: $cc-color-action !default;
15
+ $cc-co-calendar-day-hover-color: white !default;
16
16
  $cc-co-calendar-day-selected-background-color: $cc-color-action !default;
17
17
  $cc-co-calendar-day-selected-color: $cc-color-light !default;
18
+ $cc-co-calendar-week-number-height: 36px !default;
19
+ $cc-co-calendar-week-number-margin: 0 2px 0 0 !default;
20
+ $cc-co-calendar-week-number-font-size: 12px !default;
21
+ $cc-co-calendar-week-number-width: 30px !default;
22
+ $cc-co-calendar-week-number-background: #F8F8FA !default;
23
+ $cc-co-calendar-week-number-first-height: 30px !default;
24
+ $cc-co-calendar-week-number-first-margin: 0 !default;
25
+ $cc-co-calendar-week-number-first-color: #ccc !default;
18
26
  $cc-co-calendar-month-or-year-padding: 5px !default;
19
27
  $cc-co-calendar-month-or-year-hover-background-color: $cc-color-hover !default;
20
28
  $cc-co-calendar-month-or-year-hover-padding: 5px !default;
21
29
  $cc-co-calendar-weekday-font-size: 12px !default;
22
30
  $cc-co-calendar-weekday-height: 30px !default;
23
- $cc-co-calendar-weekday-width: 32px !default;
31
+ $cc-co-calendar-weekday-width: 30px !default;
24
32
  $cc-co-calendar-weekday-color: black !default;
25
- $cc-co-calendar-day-number-font-size: 14px !default;
26
- $cc-co-calendar-day-number-font-weight: bold !default;
27
- $cc-co-calendar-highlighted-day-background-color: $cc-color-action !default;
28
- $cc-co-calendar-highlighted-day-color: $cc-color-light !default;
33
+ $cc-co-calendar-weekday-background: #F8F8FA !default;
34
+ $cc-co-calendar-weekday-margin: 0 1px !default;
35
+ $cc-co-calendar-day-number-font-size: 12px !default;
36
+ $cc-co-calendar-day-number-font-weight: normal !default;
37
+ $cc-co-calendar-highlighted-day-background-color: #edf4fd !default;
38
+ $cc-co-calendar-highlighted-day-color: $cc-color-dark !default;
29
39
  $cc-co-calendar-highlighted-day-font-weight: normal !default;
30
- $cc-co-calendar-selected-day-background-color: $cc-color-main !default;
40
+ $cc-co-calendar-selected-day-background-color: $cc-color-action !default;
31
41
  $cc-co-calendar-selected-day-color: $cc-color-light !default;
42
+ $cc-co-calendar-selected-day-start-border-radius: 100% 0 0 100% !default;
43
+ $cc-co-calendar-selected-day-end-border-radius: 0 100% 100% 0 !default;
32
44
  $cc-co-calendar-selection-grid-gap: 15px !default;
33
45
  $cc-co-calendar-selection-grid-padding: 5px !default;
package/lib/components/co-dialog/style/_layout.scss CHANGED
@@ -9,6 +9,18 @@
9
9
  width: 100%;
10
10
  height: 100%;
11
11
  z-index: 800;
12
+ min-height: 100vh;
13
+ }
14
+ .co-dialog-placeholder {
15
+ position: fixed;
16
+ z-index: 801;
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
12
24
  }
13
25
  .co-dialog-wrapper {
14
26
  position: fixed;
@@ -25,15 +37,12 @@
25
37
  }
26
38
  &:not(.is-mobile) {
27
39
  .co-dialog-wrapper {
28
- top: 50%;
29
- left: 50%;
30
- max-height: initial;
40
+ position: relative;
41
+ //top: 50%;
42
+ //left: 50%;
31
43
  min-width: $cc-co-dialog-min-width;
32
- transform: translate(-50%, -50%);
33
- width: auto;
34
- .co-dialog-wrapper {
35
- width: 100%;
36
- }
44
+ //transform: translate(-50%, -50%);
45
+ width: 50vw;
37
46
  }
38
47
  }
39
48
  .dialog-header {
package/lib/components/co-dialog/style/_material-definition.scss CHANGED
@@ -5,7 +5,7 @@ $cc-co-dialog-header-font-family: $cc-font-family !default;
5
5
  $cc-co-dialog-header-font-size: $cc-font-size-default !default;
6
6
  $cc-co-dialog-header-font-weight: normal !default;
7
7
  $cc-co-dialog-header-text-color: $cc-color-dark !default;
8
- $cc-co-dialog-header-background-color: white !default;
8
+ $cc-co-dialog-header-background-color: $cc-color-background !default;
9
9
  $cc-co-dialog-header-padding: 0 0 10px 0 !default;
10
10
  $cc-co-dialog-header-margin: 0 0 10px 0 !default;
11
11
  $cc-co-dialog-header-border-style: solid !default;
@@ -16,7 +16,7 @@ $cc-co-dialog-header-close-button-right: 20px !default;
16
16
  $cc-co-dialog-header-close-button-top: 10px !default;
17
17
  $cc-co-dialog-header-close-button-size: 30px !default;
18
18
  $cc-co-dialog-min-width: 250px !default;
19
- $cc-co-dialog-background-color: $cc-color-light !default;
19
+ $cc-co-dialog-background-color: $cc-color-background !default;
20
20
  $cc-co-dialog-box-shadow: 0 0 10px #484f6040 !default;
21
21
  $cc-co-dialog-border-radius: 5px !default;
22
22
  $cc-co-dialog-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
@@ -25,14 +25,14 @@ $cc-co-dialog-content-padding: 0 !default;
25
25
  $cc-co-dialog-content-font-family: $cc-font-family !default;
26
26
  $cc-co-dialog-content-font-size: $cc-font-size-default !default;
27
27
  $cc-co-dialog-content-text-color: $cc-color-dark !default;
28
- $cc-co-dialog-content-background-color: $cc-color-light !default;
29
- $cc-co-dialog-footer-padding: 30px 0 0 0 !default;
28
+ $cc-co-dialog-content-background-color: $cc-color-background !default;
29
+ $cc-co-dialog-footer-padding: 20px 0 0 0 !default;
30
30
  $cc-co-dialog-footer-margin: 10px 0 0 0 !default;
31
31
  $cc-co-dialog-footer-font-family: $cc-font-family !default;
32
32
  $cc-co-dialog-footer-font-size: $cc-font-size-default !default;
33
33
  $cc-co-dialog-footer-text-color: $cc-color-dark !default;
34
- $cc-co-dialog-footer-background-color: $cc-color-light !default;
34
+ $cc-co-dialog-footer-background-color: $cc-color-background !default;
35
35
  $cc-co-dialog-footer-border-style: solid !default;
36
- $cc-co-dialog-footer-border-color: $cc-color-border !default;
37
- $cc-co-dialog-footer-border-width: 1px 0 0 0 !default;
36
+ $cc-co-dialog-footer-border-color: $cc-color-border-light !default;
37
+ $cc-co-dialog-footer-border-width: 2px 0 0 0 !default;
38
38
 
package/lib/components/double-calendar/style/_layout.scss CHANGED
@@ -1,15 +1,16 @@
1
1
  @include export-module('cc-double-calendar-layout') {
2
2
  .co-double-calendar {
3
-
4
3
  .dual-calendar-wrapper {
5
4
  position: fixed;
6
5
  display: flex;
7
6
  z-index: 19;
8
-
9
7
  .date-picker-container {
10
8
  position: inherit;
11
9
  height: 100%;
12
10
  }
11
+ .calendar-template {
12
+ display: flex;
13
+ }
13
14
  }
14
15
  }
15
16
  }
package/lib/components/simple-grid/style/_layout.scss CHANGED
@@ -66,6 +66,13 @@
66
66
  width: $cc-simple-grid-cell-icon-size;
67
67
  height: $cc-simple-grid-cell-icon-size;
68
68
  }
69
+ .co-button {
70
+ background-color: $cc-simple-grid-button-background-color;
71
+ .co-icon {
72
+ width: $cc-simple-grid-cell-icon-size;
73
+ height: $cc-simple-grid-cell-icon-size;
74
+ }
75
+ }
69
76
  }
70
77
  .simple-grid-column-cell-value {
71
78
  //height: 100%;
package/lib/components/simple-grid/style/_material-definition.scss CHANGED
@@ -34,6 +34,8 @@ $cc-simple-grid-cell-icon-size: 20px !default;
34
34
  $cc-simple-grid-pagination-background-color: white !default;
35
35
  $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;
36
36
 
37
+ $cc-simple-grid-button-background-color: #FFFFFF !default;
38
+
37
39
  $cc-simple-grid-input-checkbox-height: 18px !default;
38
40
  $cc-simple-grid-input-checkbox-color: #F5F5FC;
39
41
  $cc-simple-grid-input-checkbox-checked-color: #1a73e8;
package/lib/style/_variables.scss CHANGED
@@ -21,6 +21,7 @@ $accent: $cc-color-action !default;
21
21
  $cc-color-input-background-color: white !default;
22
22
  $cc-color-input-placeholder-color: #8083A3 !default;
23
23
  $cc-color-dark: #22313C !default;
24
+ $cc-color-background: #F8F8Fa !default;
24
25
  $cc-color-main: #1060AD !default;
25
26
  $cc-color-light-accent: #DCE4EA !default;
26
27
  $cc-color-light: #FFFFFF !default;
@@ -49,7 +50,7 @@ $cc-color-input-info: #e4e6eb !default;
49
50
  $cc-color-active-accent: #8faba6 !default;
50
51
  $cc-color-less-light: #F7FAFA !default;
51
52
  $cc-color-border: #CCCCCC !default;
52
- $cc-color-border-light: #f7f5f4 !default;
53
+ $cc-color-border-light: #FFFFFF !default;
53
54
  $cc-color-form-input-background-focus: #BBD9E6 !default;
54
55
  $cc-color-inactive: #A5CBDA !default;
55
56
  $cc-color-shapes: #0062A9 !default;
@@ -99,6 +100,8 @@ $cc-pretty-hover-transition-time: 0.14s !default;
99
100
 
100
101
  $cc-font-size-value-text: 13px !default;
101
102
 
103
+ $cc-co-dialog-footer-border-width: 2px 0 0 0 !default;
104
+ $cc-co-dialog-footer-padding: 20px 0 0 0 !default;
102
105
  /* Inputs */
103
106
  $cc-input-required-mark-width-height: 7px;
104
107
  $cc-input-required-mark-position-top: 7px;
@@ -154,4 +157,6 @@ $cc-dialog-header-title-margin: 0 0 20px 0 !default;
154
157
  $cc-dialog-header-title-font-weight: bold !default;
155
158
  $cc-dialog-footer-justify-content: center !default;
156
159
  $cc-dialog-footer-column-gap: 10px !default;
160
+ $cc-dialog-checkbox-checked-background-color: $cc-color-action !default;
161
+ $cc-dialog-header-title-gap: 10px !default;
157
162
  /**********/
package/lib/style/corecomponents-globals.scss CHANGED
@@ -75,15 +75,67 @@ textarea {
75
75
  }
76
76
 
77
77
  // global for dialog \\
78
- .co-dialog-header-title {
79
- font-size: $cc-dialog-header-title-font-size;
80
- margin: $cc-dialog-header-title-margin;
81
- font-weight: $cc-dialog-header-title-font-weight;
82
- }
78
+ .co-dialog {
79
+ .dialog-header {
80
+ .co-dialog-wrapper-popup-title {
81
+ display: flex;
82
+ align-items: center;
83
+ grid-column-gap: $cc-dialog-header-title-gap;
84
+ column-gap: $cc-dialog-header-title-gap;
85
+ }
86
+ .co-dialog-header-title {
87
+ font-size: $cc-dialog-header-title-font-size;
88
+ margin: $cc-dialog-header-title-margin;
89
+ font-weight: $cc-dialog-header-title-font-weight;
90
+ }
91
+ }
92
+ .dialog-footer {
93
+ background-color: $cc-color-background;
94
+ border-width: $cc-co-dialog-footer-border-width;
95
+ border-style: solid;
96
+ border-color: $cc-color-border-light;
97
+ padding: $cc-co-dialog-footer-padding;
98
+ .co-dialog-footer-button-wrapper {
99
+ display: flex;
100
+ gap: $cc-dialog-footer-column-gap;
101
+ column-gap: $cc-dialog-footer-column-gap;
102
+ justify-content: $cc-dialog-footer-justify-content;
103
+ }
104
+ }
105
+ .co-input-checkbox {
106
+ &:not(.hasnolabel) {
107
+ .checkbox {
108
+ border-color: $cc-color-light;
109
+ background-color: $cc-color-light;
83
110
 
84
- .co-dialog-footer-button-wrapper {
85
- display: flex;
86
- justify-content: $cc-dialog-footer-justify-content;
87
- column-gap: $cc-dialog-footer-column-gap;
111
+ &.checked {
112
+ border-color: $cc-dialog-checkbox-checked-background-color;
113
+ background-color: $cc-dialog-checkbox-checked-background-color;
114
+ }
115
+
116
+ .checkmark {
117
+ &.show {
118
+ border-color: $cc-color-light;
119
+ }
120
+ }
121
+ }
122
+ }
123
+ }
124
+ .co-input-text {
125
+ &:before {
126
+ box-shadow: none;
127
+ }
128
+ }
129
+ .co-input-search {
130
+ .co-input-text {
131
+ background: $cc-color-light;
132
+ &:not(.has-left-icon) {
133
+ &:not(.has-right-icon) {
134
+ background: $cc-color-light;
135
+ }
136
+ }
137
+ }
138
+ }
88
139
  }
140
+
89
141
  ///////////////////////
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colijnit/corecomponents_v12",
3
- "version": "12.2.10",
3
+ "version": "12.2.11",
4
4
  "description": "Colijn IT core components for Angular 12",
5
5
  "private": false,
6
6
  "peerDependencies": {