@colijnit/corecomponents_v12 12.0.60 → 12.0.62
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 +65 -23
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/base/base-input.component.js +11 -5
- package/esm2015/lib/components/co-dialog/co-dialog.component.js +53 -18
- package/esm2015/lib/components/input-checkbox/input-checkbox.component.js +3 -1
- package/esm2015/lib/components/input-listbox/input-listbox.component.js +2 -2
- package/esm2015/lib/components/input-textarea/input-textarea.component.js +8 -1
- package/esm2015/lib/components/input-textarea/input-textarea.module.js +4 -2
- package/fesm2015/colijnit-corecomponents_v12.js +74 -23
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/co-dialog/co-dialog.component.d.ts +13 -4
- package/lib/components/co-dialog/style/_layout.scss +44 -6
- package/lib/components/co-dialog/style/_material-definition.scss +16 -4
- package/lib/components/co-dialog/style/_theme.scss +8 -1
- package/lib/components/simple-grid/style/_layout.scss +1 -1
- package/lib/components/simple-grid/style/_material-definition.scss +1 -0
- package/package.json +1 -1
|
@@ -1,14 +1,23 @@
|
|
|
1
|
-
import { EventEmitter } from '@angular/core';
|
|
1
|
+
import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
|
|
2
2
|
import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
|
|
3
|
-
|
|
3
|
+
import { AnimationTriggerMetadata } from '@angular/animations';
|
|
4
|
+
export declare function showHideDialogAnimation(name: string): AnimationTriggerMetadata;
|
|
5
|
+
export declare class CoDialogComponent implements OnInit {
|
|
4
6
|
readonly icons: typeof CoreComponentsIcon;
|
|
7
|
+
headerTemplate: TemplateRef<any>;
|
|
8
|
+
footerTemplate: TemplateRef<any>;
|
|
5
9
|
showCloseIcon: boolean;
|
|
6
10
|
modal: boolean;
|
|
7
11
|
borderless: boolean;
|
|
8
|
-
animation: boolean;
|
|
9
12
|
readonly closeClick: EventEmitter<MouseEvent>;
|
|
10
13
|
readonly overlayClick: EventEmitter<MouseEvent>;
|
|
11
14
|
showClass(): boolean;
|
|
12
|
-
|
|
15
|
+
handleKeyDown(event: KeyboardEvent): void;
|
|
16
|
+
isTouch: boolean;
|
|
17
|
+
mobile: boolean;
|
|
18
|
+
show: boolean;
|
|
19
|
+
ngOnInit(): void;
|
|
20
|
+
handleCloseDialog(event?: MouseEvent): void;
|
|
13
21
|
handleOverlayClick(event: MouseEvent): void;
|
|
22
|
+
private _checkDevice;
|
|
14
23
|
}
|
|
@@ -12,14 +12,26 @@
|
|
|
12
12
|
}
|
|
13
13
|
.co-dialog-wrapper {
|
|
14
14
|
position: fixed;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
left: 0;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
border-radius: $cc-co-dialog-border-radius;
|
|
19
19
|
max-width: 100vw;
|
|
20
20
|
z-index: 801;
|
|
21
21
|
height: auto;
|
|
22
|
-
width:
|
|
22
|
+
width: 100%;
|
|
23
|
+
max-height: 80vh;
|
|
24
|
+
padding: $cc-co-dialog-padding;
|
|
25
|
+
}
|
|
26
|
+
&:not(.is-mobile) {
|
|
27
|
+
.co-dialog-wrapper {
|
|
28
|
+
top: 50%;
|
|
29
|
+
left: 50%;
|
|
30
|
+
max-height: initial;
|
|
31
|
+
min-width: $cc-co-dialog-min-width;
|
|
32
|
+
transform: translate(-50%, -50%);
|
|
33
|
+
width: auto;
|
|
34
|
+
}
|
|
23
35
|
}
|
|
24
36
|
.dialog-header {
|
|
25
37
|
display: flex;
|
|
@@ -28,7 +40,29 @@
|
|
|
28
40
|
align-items: center;
|
|
29
41
|
font-family: $cc-co-dialog-header-font-family;
|
|
30
42
|
font-size: $cc-co-dialog-header-font-size;
|
|
31
|
-
|
|
43
|
+
.dialog-header-caption {
|
|
44
|
+
width: 100%;
|
|
45
|
+
font-weight: $cc-co-dialog-header-font-weight;
|
|
46
|
+
padding: $cc-co-dialog-header-padding;
|
|
47
|
+
margin: $cc-co-dialog-header-margin;
|
|
48
|
+
border-style: $cc-co-dialog-header-border-style;
|
|
49
|
+
border-width: $cc-co-dialog-header-border-width;
|
|
50
|
+
}
|
|
51
|
+
.dialog-close-button {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 0;
|
|
57
|
+
right: 5px;
|
|
58
|
+
transform: translateY(-50%);
|
|
59
|
+
width: 36px;
|
|
60
|
+
height: 36px;
|
|
61
|
+
border-radius: 5px;
|
|
62
|
+
.co-icon [fill] {
|
|
63
|
+
fill: white;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
32
66
|
}
|
|
33
67
|
.dialog-content {
|
|
34
68
|
font-family: $cc-co-dialog-content-font-family;
|
|
@@ -42,6 +76,10 @@
|
|
|
42
76
|
font-family: $cc-co-dialog-footer-font-family;
|
|
43
77
|
font-size: $cc-co-dialog-footer-font-size;
|
|
44
78
|
padding: $cc-co-dialog-footer-padding;
|
|
79
|
+
margin: $cc-co-dialog-footer-margin;
|
|
80
|
+
border-style: $cc-co-dialog-footer-border-style;
|
|
81
|
+
border-width: $cc-co-dialog-footer-border-width;
|
|
82
|
+
|
|
45
83
|
}
|
|
46
84
|
.dialog-close-button {
|
|
47
85
|
cursor: pointer;
|
|
@@ -1,23 +1,35 @@
|
|
|
1
1
|
$cc-co-dialog-font-family: $cc-font-family !default;
|
|
2
2
|
$cc-co-dialog-font-size: $cc-font-size-default !default;
|
|
3
|
+
$cc-co-dialog-padding: 20px !default;
|
|
3
4
|
$cc-co-dialog-header-font-family: $cc-font-family !default;
|
|
4
5
|
$cc-co-dialog-header-font-size: $cc-font-size-default !default;
|
|
6
|
+
$cc-co-dialog-header-font-weight: normal !default;
|
|
5
7
|
$cc-co-dialog-header-text-color: $cc-color-dark !default;
|
|
6
8
|
$cc-co-dialog-header-background-color: white !default;
|
|
7
|
-
$cc-co-dialog-header-padding: 10px !default;
|
|
9
|
+
$cc-co-dialog-header-padding: 0 0 10px 0 !default;
|
|
10
|
+
$cc-co-dialog-header-margin: 0 0 10px 0 !default;
|
|
11
|
+
$cc-co-dialog-header-border-style: solid !default;
|
|
12
|
+
$cc-co-dialog-header-border-color: $cc-color-border !default;
|
|
13
|
+
$cc-co-dialog-header-border-width: 0 0 1px 0 !default;
|
|
14
|
+
$cc-co-dialog-header-close-button-background-color: #4682b4 !default;
|
|
8
15
|
$cc-co-dialog-min-width: 250px !default;
|
|
9
16
|
$cc-co-dialog-background-color: $cc-color-light !default;
|
|
10
|
-
$cc-co-dialog-box-shadow:
|
|
17
|
+
$cc-co-dialog-box-shadow: 0 0 10px #484f6040 !default;
|
|
18
|
+
$cc-co-dialog-border-radius: 5px !default;
|
|
11
19
|
$cc-co-dialog-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
|
|
12
20
|
$cc-co-dialog-overlay-backdrop-filter: blur(2px) !default;
|
|
13
|
-
$cc-co-dialog-content-padding:
|
|
21
|
+
$cc-co-dialog-content-padding: 0 !default;
|
|
14
22
|
$cc-co-dialog-content-font-family: $cc-font-family !default;
|
|
15
23
|
$cc-co-dialog-content-font-size: $cc-font-size-default !default;
|
|
16
24
|
$cc-co-dialog-content-text-color: $cc-color-dark !default;
|
|
17
25
|
$cc-co-dialog-content-background-color: $cc-color-light !default;
|
|
18
|
-
$cc-co-dialog-footer-padding: 10px !default;
|
|
26
|
+
$cc-co-dialog-footer-padding: 10px 0 0 0 !default;
|
|
27
|
+
$cc-co-dialog-footer-margin: 10px 0 0 0 !default;
|
|
19
28
|
$cc-co-dialog-footer-font-family: $cc-font-family !default;
|
|
20
29
|
$cc-co-dialog-footer-font-size: $cc-font-size-default !default;
|
|
21
30
|
$cc-co-dialog-footer-text-color: $cc-color-dark !default;
|
|
22
31
|
$cc-co-dialog-footer-background-color: $cc-color-light !default;
|
|
32
|
+
$cc-co-dialog-footer-border-style: solid !default;
|
|
33
|
+
$cc-co-dialog-footer-border-color: $cc-color-border !default;
|
|
34
|
+
$cc-co-dialog-footer-border-width: 1px 0 0 0 !default;
|
|
23
35
|
|
|
@@ -4,13 +4,19 @@
|
|
|
4
4
|
background-color: $cc-co-dialog-overlay-background-color;
|
|
5
5
|
backdrop-filter: $cc-co-dialog-overlay-backdrop-filter;
|
|
6
6
|
}
|
|
7
|
-
&:not(.borderless).co-dialog-wrapper {
|
|
7
|
+
&:not(.borderless) .co-dialog-wrapper {
|
|
8
8
|
background-color: $cc-co-dialog-background-color;
|
|
9
9
|
box-shadow: $cc-co-dialog-box-shadow;
|
|
10
10
|
}
|
|
11
11
|
.dialog-header {
|
|
12
12
|
color: $cc-co-dialog-header-text-color;
|
|
13
13
|
background-color: $cc-co-dialog-header-background-color;
|
|
14
|
+
.dialog-header-caption {
|
|
15
|
+
border-color: $cc-co-dialog-header-border-color;
|
|
16
|
+
}
|
|
17
|
+
.dialog-close-button {
|
|
18
|
+
background: $cc-co-dialog-header-close-button-background-color;
|
|
19
|
+
}
|
|
14
20
|
}
|
|
15
21
|
.dialog-content {
|
|
16
22
|
color: $cc-co-dialog-content-text-color;
|
|
@@ -19,6 +25,7 @@
|
|
|
19
25
|
.dialog-footer {
|
|
20
26
|
color: $cc-co-dialog-footer-text-color;
|
|
21
27
|
background-color: $cc-co-dialog-footer-background-color;
|
|
28
|
+
border-color: $cc-co-dialog-footer-border-color;
|
|
22
29
|
}
|
|
23
30
|
}
|
|
24
31
|
}
|
|
@@ -13,6 +13,7 @@ $cc-simple-grid-header-border-color: $cc-color-action !default;
|
|
|
13
13
|
$cc-simple-grid-header-sizer-background-color: white !default;
|
|
14
14
|
|
|
15
15
|
$cc-simple-grid-row-align-items: center !default;
|
|
16
|
+
$cc-simple-grid-row-vertical-align-items: middle !default;
|
|
16
17
|
$cc-simple-grid-row-background-color: $cc-color-grid-row-background !default;
|
|
17
18
|
$cc-simple-grid-row-odd-background-color: $cc-color-grid-row-odd-background !default;
|
|
18
19
|
$cc-simple-grid-row-selected-background-color: $cc-color-grid-row-selected-background !default;
|