@colijnit/corecomponents_v12 12.2.10 → 12.2.12
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 +82 -37
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/calendar/calendar-template.component.js +51 -17
- package/esm2015/lib/components/co-dialog/co-dialog.component.js +16 -13
- package/esm2015/lib/components/co-dialog/co-dialog.module.js +4 -2
- package/esm2015/lib/components/form/form.component.js +2 -2
- package/esm2015/lib/components/input-date-range-picker/input-date-range-picker.component.js +14 -4
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +3 -3
- package/esm2015/lib/directives/overlay/overlay.directive.js +18 -9
- package/fesm2015/colijnit-corecomponents_v12.js +117 -61
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/button/style/_layout.scss +29 -7
- package/lib/components/button/style/_material-definition.scss +12 -0
- package/lib/components/calendar/calendar-template.component.d.ts +4 -0
- package/lib/components/calendar/style/_layout.scss +33 -4
- package/lib/components/calendar/style/_material-definition.scss +25 -12
- package/lib/components/co-dialog/style/_layout.scss +25 -8
- package/lib/components/co-dialog/style/_material-definition.scss +8 -7
- package/lib/components/double-calendar/style/_layout.scss +4 -3
- package/lib/components/input-date-range-picker/input-date-range-picker.component.d.ts +5 -0
- package/lib/components/simple-grid/style/_layout.scss +7 -0
- package/lib/components/simple-grid/style/_material-definition.scss +2 -0
- package/lib/directives/overlay/overlay.directive.d.ts +1 -1
- package/lib/style/_variables.scss +6 -1
- package/lib/style/corecomponents-globals.scss +61 -9
- package/package.json +1 -1
|
@@ -78,20 +78,42 @@
|
|
|
78
78
|
z-index: 1;
|
|
79
79
|
}
|
|
80
80
|
&.save-button {
|
|
81
|
-
height: $cc-btn-
|
|
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:
|
|
84
|
-
width:
|
|
91
|
+
height: $cc-dialog-btn-icon-size;
|
|
92
|
+
width: $cc-dialog-btn-icon-size;
|
|
85
93
|
svg {
|
|
86
|
-
fill: $cc-color
|
|
94
|
+
fill: $cc-dialog-btn-icon-color;
|
|
87
95
|
}
|
|
88
96
|
}
|
|
89
97
|
}
|
|
90
98
|
&.close-button {
|
|
91
|
-
height: $cc-btn-
|
|
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:
|
|
94
|
-
width:
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -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
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
.date-picker-container {
|
|
5
5
|
position: fixed;
|
|
6
|
-
z-index:
|
|
6
|
+
z-index: $cc-co-calendar-z-index;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
@@ -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 {
|
|
@@ -4,30 +4,43 @@ $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:
|
|
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:
|
|
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:
|
|
12
|
-
$cc-co-calendar-day-height:
|
|
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:
|
|
15
|
-
$cc-co-calendar-day-hover-color:
|
|
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:
|
|
31
|
+
$cc-co-calendar-weekday-width: 30px !default;
|
|
24
32
|
$cc-co-calendar-weekday-color: black !default;
|
|
25
|
-
$cc-co-calendar-
|
|
26
|
-
$cc-co-calendar-
|
|
27
|
-
$cc-co-calendar-
|
|
28
|
-
$cc-co-calendar-
|
|
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-
|
|
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;
|
|
46
|
+
$cc-co-calendar-z-index: 9999 !default;
|
|
@@ -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,17 +37,22 @@
|
|
|
25
37
|
}
|
|
26
38
|
&:not(.is-mobile) {
|
|
27
39
|
.co-dialog-wrapper {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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:
|
|
34
|
-
.co-dialog-wrapper {
|
|
35
|
-
width: 100%;
|
|
36
|
-
}
|
|
44
|
+
//transform: translate(-50%, -50%);
|
|
45
|
+
width: 50vw;
|
|
37
46
|
}
|
|
38
47
|
}
|
|
48
|
+
.dialog-drag-handle {
|
|
49
|
+
display: flex;
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: $cc-co-dialog-drag-handle-height;
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
}
|
|
39
56
|
.dialog-header {
|
|
40
57
|
display: flex;
|
|
41
58
|
flex-direction: row;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
$cc-co-dialog-font-family: $cc-font-family !default;
|
|
2
2
|
$cc-co-dialog-font-size: $cc-font-size-default !default;
|
|
3
3
|
$cc-co-dialog-padding: 30px !default;
|
|
4
|
+
$cc-co-dialog-drag-handle-height: 30px !default;
|
|
4
5
|
$cc-co-dialog-header-font-family: $cc-font-family !default;
|
|
5
6
|
$cc-co-dialog-header-font-size: $cc-font-size-default !default;
|
|
6
7
|
$cc-co-dialog-header-font-weight: normal !default;
|
|
7
8
|
$cc-co-dialog-header-text-color: $cc-color-dark !default;
|
|
8
|
-
$cc-co-dialog-header-background-color:
|
|
9
|
+
$cc-co-dialog-header-background-color: $cc-color-background !default;
|
|
9
10
|
$cc-co-dialog-header-padding: 0 0 10px 0 !default;
|
|
10
11
|
$cc-co-dialog-header-margin: 0 0 10px 0 !default;
|
|
11
12
|
$cc-co-dialog-header-border-style: solid !default;
|
|
@@ -16,7 +17,7 @@ $cc-co-dialog-header-close-button-right: 20px !default;
|
|
|
16
17
|
$cc-co-dialog-header-close-button-top: 10px !default;
|
|
17
18
|
$cc-co-dialog-header-close-button-size: 30px !default;
|
|
18
19
|
$cc-co-dialog-min-width: 250px !default;
|
|
19
|
-
$cc-co-dialog-background-color: $cc-color-
|
|
20
|
+
$cc-co-dialog-background-color: $cc-color-background !default;
|
|
20
21
|
$cc-co-dialog-box-shadow: 0 0 10px #484f6040 !default;
|
|
21
22
|
$cc-co-dialog-border-radius: 5px !default;
|
|
22
23
|
$cc-co-dialog-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
|
|
@@ -25,14 +26,14 @@ $cc-co-dialog-content-padding: 0 !default;
|
|
|
25
26
|
$cc-co-dialog-content-font-family: $cc-font-family !default;
|
|
26
27
|
$cc-co-dialog-content-font-size: $cc-font-size-default !default;
|
|
27
28
|
$cc-co-dialog-content-text-color: $cc-color-dark !default;
|
|
28
|
-
$cc-co-dialog-content-background-color: $cc-color-
|
|
29
|
-
$cc-co-dialog-footer-padding:
|
|
29
|
+
$cc-co-dialog-content-background-color: $cc-color-background !default;
|
|
30
|
+
$cc-co-dialog-footer-padding: 20px 0 0 0 !default;
|
|
30
31
|
$cc-co-dialog-footer-margin: 10px 0 0 0 !default;
|
|
31
32
|
$cc-co-dialog-footer-font-family: $cc-font-family !default;
|
|
32
33
|
$cc-co-dialog-footer-font-size: $cc-font-size-default !default;
|
|
33
34
|
$cc-co-dialog-footer-text-color: $cc-color-dark !default;
|
|
34
|
-
$cc-co-dialog-footer-background-color: $cc-color-
|
|
35
|
+
$cc-co-dialog-footer-background-color: $cc-color-background !default;
|
|
35
36
|
$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:
|
|
37
|
+
$cc-co-dialog-footer-border-color: $cc-color-border-light !default;
|
|
38
|
+
$cc-co-dialog-footer-border-width: 2px 0 0 0 !default;
|
|
38
39
|
|
|
@@ -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
|
-
z-index:
|
|
8
|
-
|
|
6
|
+
z-index: 999;
|
|
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
|
}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
1
2
|
import { BaseInputDatePickerDirective } from "../base-input-date-picker/base-input-date-picker.directive";
|
|
2
3
|
export declare class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
|
|
3
4
|
firstDateAsString: any;
|
|
4
5
|
secondDateAsString: any;
|
|
5
6
|
private _doubleCalendarComponentRef;
|
|
7
|
+
firstInput: ElementRef;
|
|
8
|
+
secondInput: ElementRef;
|
|
6
9
|
showClass(): boolean;
|
|
10
|
+
handleFirstInputClick(event: Event): void;
|
|
11
|
+
handleSecondInputClick(event: Event): void;
|
|
7
12
|
handleDatesSelected(dates: Date[]): void;
|
|
8
13
|
handleSecondDateSelected(): void;
|
|
9
14
|
clearDate(index: number): void;
|
|
@@ -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%;
|
|
@@ -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;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ElementRef, OnDestroy, OnInit } from '@angular/core';
|
|
2
2
|
import { OverlayParentDirective } from './overlay-parent.directive';
|
|
3
3
|
export declare class OverlayDirective implements OnDestroy, OnInit {
|
|
4
|
-
set parent(value: OverlayParentDirective | ElementRef);
|
|
4
|
+
set parent(value: OverlayParentDirective | ElementRef | HTMLElement);
|
|
5
5
|
view: HTMLElement;
|
|
6
6
|
/**
|
|
7
7
|
* true; Element is added to the parent template
|
|
@@ -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: #
|
|
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
|
/**********/
|
|
@@ -75,15 +75,67 @@ textarea {
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// global for dialog \\
|
|
78
|
-
.co-dialog
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
///////////////////////
|