mis-crystal-design-system 18.0.8 → 18.0.9
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/button/button.directive.scss +69 -0
- package/drawer/drawer.scss +20 -0
- package/dropdown/dropdown.component.d.ts +10 -2
- package/esm2022/dropdown/dropdown.component.mjs +124 -76
- package/esm2022/phone-input/phone-input.component.mjs +2 -2
- package/fesm2022/mis-crystal-design-system-dropdown.mjs +123 -75
- package/fesm2022/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-phone-input.mjs +2 -2
- package/fesm2022/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/input/mis-input.component.scss +180 -0
- package/modal/modal.scss +9 -0
- package/package.json +12 -12
- package/styles/fonts/icomoon.eot +0 -0
- package/styles/fonts/icomoon.svg +315 -0
- package/styles/fonts/icomoon.ttf +0 -0
- package/styles/fonts/icomoon.woff +0 -0
- package/styles/mis-borders-backgrounds.scss +764 -0
- package/styles/mis-color-constants.scss +149 -0
- package/styles/mis-flex.scss +321 -0
- package/styles/mis-fonts.scss +124 -0
- package/styles/mis-icons.scss +1054 -0
- package/styles/mis-mixins.scss +46 -0
- package/styles/mis-old-icon-styles.scss +498 -0
- package/styles/mis-spacing-sizing.scss +2590 -0
- package/styles/mis-typography.scss +462 -0
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
.mis-btn {
|
|
2
|
+
background: none;
|
|
3
|
+
outline: none;
|
|
4
|
+
border: none;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
border-radius: 4px;
|
|
7
|
+
vertical-align: middle;
|
|
8
|
+
text-align: center;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
|
|
15
|
+
span,
|
|
16
|
+
img {
|
|
17
|
+
margin-right: 8px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
padding: 10px 16px;
|
|
21
|
+
font-size: 16px;
|
|
22
|
+
line-height: 24px;
|
|
23
|
+
&.mis-btn-lg {
|
|
24
|
+
padding: 16px;
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
}
|
|
27
|
+
&.mis-btn-sm {
|
|
28
|
+
padding: 6px 12px;
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
line-height: 20px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
color: #0937b2;
|
|
35
|
+
&:hover {
|
|
36
|
+
background-color: #f0f3fa;
|
|
37
|
+
}
|
|
38
|
+
&:focus {
|
|
39
|
+
background-color: #dae1f3;
|
|
40
|
+
}
|
|
41
|
+
&:disabled {
|
|
42
|
+
color: #929dab;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&.mis-outline {
|
|
47
|
+
border: 1px solid #0937b2;
|
|
48
|
+
|
|
49
|
+
&:disabled {
|
|
50
|
+
color: #929dab;
|
|
51
|
+
border-color: #929dab;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.mis-primary {
|
|
56
|
+
background-color: #0937b2;
|
|
57
|
+
color: #ffffff;
|
|
58
|
+
&:hover {
|
|
59
|
+
background-color: #062a99;
|
|
60
|
+
}
|
|
61
|
+
&:focus {
|
|
62
|
+
background-color: #041f80;
|
|
63
|
+
}
|
|
64
|
+
&:disabled {
|
|
65
|
+
background-color: #e0e0e0;
|
|
66
|
+
color: #929dab;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.mis-drawer {
|
|
2
|
+
display: block;
|
|
3
|
+
transition: all 300ms ease-out;
|
|
4
|
+
}
|
|
5
|
+
.mis-drawer-overlay {
|
|
6
|
+
background: rgba(0, 0, 0, 0.12);
|
|
7
|
+
}
|
|
8
|
+
mis-datepicker-container {
|
|
9
|
+
z-index: 2100;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
mis-loader {
|
|
13
|
+
z-index: 3000;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@keyframes slideOut {
|
|
17
|
+
to {
|
|
18
|
+
transform: translateX(100%);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { Overlay } from "@angular/cdk/overlay";
|
|
2
|
-
import { ElementRef, EventEmitter, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
|
|
2
|
+
import { ElementRef, EventEmitter, OnInit, TemplateRef, ViewContainerRef, ChangeDetectorRef } from "@angular/core";
|
|
3
3
|
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class DropdownComponent implements OnInit {
|
|
6
6
|
private eRef;
|
|
7
7
|
private overlay;
|
|
8
8
|
private viewContainerRef;
|
|
9
|
+
private cdr;
|
|
9
10
|
isOpen: boolean;
|
|
10
11
|
loading: boolean;
|
|
11
12
|
isSearchInputFocused: boolean;
|
|
12
13
|
searchInput: string;
|
|
13
14
|
searchData: DropdownItem[];
|
|
14
15
|
visibleItems: number;
|
|
16
|
+
dynamicHeight: string;
|
|
15
17
|
data: DropdownItem[];
|
|
16
18
|
height: string;
|
|
17
19
|
ariaLabel: string;
|
|
@@ -38,11 +40,17 @@ export declare class DropdownComponent implements OnInit {
|
|
|
38
40
|
onChange: EventEmitter<any>;
|
|
39
41
|
selectElement: ElementRef;
|
|
40
42
|
popupContainer: TemplateRef<Element>;
|
|
43
|
+
itemsContainer: ElementRef;
|
|
41
44
|
viewPort: CdkVirtualScrollViewport;
|
|
42
45
|
customItem: TemplateRef<Element>;
|
|
43
46
|
private overlayRef;
|
|
44
|
-
constructor(eRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef);
|
|
47
|
+
constructor(eRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef, cdr: ChangeDetectorRef);
|
|
45
48
|
ngOnInit(): void;
|
|
49
|
+
measureAndUpdateHeight(): void;
|
|
50
|
+
get currentData(): DropdownItem[];
|
|
51
|
+
get itemsContainerStyle(): {
|
|
52
|
+
[key: string]: string;
|
|
53
|
+
};
|
|
46
54
|
getIconStyles(item: any, activeItem: boolean): {
|
|
47
55
|
[key: string]: string;
|
|
48
56
|
};
|