mis-crystal-design-system 18.1.5 → 18.1.6-test-1

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 (36) hide show
  1. package/dynamic-form/dynamic-form.component.d.ts +15 -0
  2. package/esm2022/dynamic-form/dynamic-form.component.mjs +193 -78
  3. package/esm2022/slider/slider.component.mjs +2 -2
  4. package/esm2022/table/table.component.mjs +2 -2
  5. package/esm2022/timepicker/timepicker.component.mjs +16 -10
  6. package/esm2022/timerangepicker/timerangepicker.component.mjs +8 -6
  7. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs +192 -77
  8. package/fesm2022/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  9. package/fesm2022/mis-crystal-design-system-slider.mjs +2 -2
  10. package/fesm2022/mis-crystal-design-system-slider.mjs.map +1 -1
  11. package/fesm2022/mis-crystal-design-system-table.mjs +2 -2
  12. package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
  13. package/fesm2022/mis-crystal-design-system-timepicker.mjs +15 -9
  14. package/fesm2022/mis-crystal-design-system-timepicker.mjs.map +1 -1
  15. package/fesm2022/mis-crystal-design-system-timerangepicker.mjs +7 -5
  16. package/fesm2022/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
  17. package/package.json +17 -17
  18. package/timepicker/timepicker.component.d.ts +3 -1
  19. package/timerangepicker/timerangepicker.component.d.ts +3 -1
  20. package/button/button.directive.scss +0 -71
  21. package/drawer/drawer.scss +0 -20
  22. package/input/mis-input.component.scss +0 -187
  23. package/modal/modal.scss +0 -9
  24. package/styles/fonts/icomoon.eot +0 -0
  25. package/styles/fonts/icomoon.svg +0 -315
  26. package/styles/fonts/icomoon.ttf +0 -0
  27. package/styles/fonts/icomoon.woff +0 -0
  28. package/styles/mis-borders-backgrounds.scss +0 -764
  29. package/styles/mis-color-constants.scss +0 -353
  30. package/styles/mis-flex.scss +0 -321
  31. package/styles/mis-fonts.scss +0 -124
  32. package/styles/mis-icons.scss +0 -1054
  33. package/styles/mis-mixins.scss +0 -46
  34. package/styles/mis-old-icon-styles.scss +0 -498
  35. package/styles/mis-spacing-sizing.scss +0 -2590
  36. package/styles/mis-typography.scss +0 -462
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mis-crystal-design-system",
3
- "version": "18.1.5",
3
+ "version": "18.1.6-test-1",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "*",
6
6
  "@angular/core": "*",
@@ -40,17 +40,11 @@
40
40
  "esm": "./esm2022/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.mjs",
41
41
  "default": "./fesm2022/mis-crystal-design-system-async-search-dropdown.mjs"
42
42
  },
43
- "./chip": {
44
- "types": "./chip/index.d.ts",
45
- "esm2022": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
46
- "esm": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
47
- "default": "./fesm2022/mis-crystal-design-system-chip.mjs"
48
- },
49
- "./datepicker_v2": {
50
- "types": "./datepicker_v2/index.d.ts",
51
- "esm2022": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
52
- "esm": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
53
- "default": "./fesm2022/mis-crystal-design-system-datepicker_v2.mjs"
43
+ "./checkbox": {
44
+ "types": "./checkbox/index.d.ts",
45
+ "esm2022": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
46
+ "esm": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
47
+ "default": "./fesm2022/mis-crystal-design-system-checkbox.mjs"
54
48
  },
55
49
  "./button": {
56
50
  "types": "./button/index.d.ts",
@@ -58,11 +52,17 @@
58
52
  "esm": "./esm2022/button/mis-crystal-design-system-button.mjs",
59
53
  "default": "./fesm2022/mis-crystal-design-system-button.mjs"
60
54
  },
61
- "./checkbox": {
62
- "types": "./checkbox/index.d.ts",
63
- "esm2022": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
64
- "esm": "./esm2022/checkbox/mis-crystal-design-system-checkbox.mjs",
65
- "default": "./fesm2022/mis-crystal-design-system-checkbox.mjs"
55
+ "./datepicker_v2": {
56
+ "types": "./datepicker_v2/index.d.ts",
57
+ "esm2022": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
58
+ "esm": "./esm2022/datepicker_v2/mis-crystal-design-system-datepicker_v2.mjs",
59
+ "default": "./fesm2022/mis-crystal-design-system-datepicker_v2.mjs"
60
+ },
61
+ "./chip": {
62
+ "types": "./chip/index.d.ts",
63
+ "esm2022": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
64
+ "esm": "./esm2022/chip/mis-crystal-design-system-chip.mjs",
65
+ "default": "./fesm2022/mis-crystal-design-system-chip.mjs"
66
66
  },
67
67
  "./daterangepicker_v2": {
68
68
  "types": "./daterangepicker_v2/index.d.ts",
@@ -30,6 +30,8 @@ export declare class TimePickerComponent implements OnInit, OnDestroy {
30
30
  minTime: import("@angular/core").InputSignal<number>;
31
31
  triggerChange: import("@angular/core").InputSignal<boolean>;
32
32
  disable: import("@angular/core").InputSignal<boolean>;
33
+ disableUserInput: import("@angular/core").InputSignal<boolean>;
34
+ fontSize: import("@angular/core").InputSignal<string>;
33
35
  private computedFirstInterval;
34
36
  private _isInitializing;
35
37
  timeEmitter: import("@angular/core").OutputEmitterRef<ITime>;
@@ -50,5 +52,5 @@ export declare class TimePickerComponent implements OnInit, OnDestroy {
50
52
  populateDropdown(): void;
51
53
  ngOnDestroy(): void;
52
54
  static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
53
- static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "mis-timepicker", never, { "clockFormat": { "alias": "clockFormat"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "dateAsEpoch": { "alias": "dateAsEpoch"; "required": false; "isSignal": true; }; "firstInterval": { "alias": "firstInterval"; "required": false; "isSignal": true; }; "rangeValidity": { "alias": "rangeValidity"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "givenTime": { "alias": "givenTime"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "triggerChange": { "alias": "triggerChange"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; }, { "timeEmitter": "timeEmitter"; }, never, never, false, never>;
55
+ static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "mis-timepicker", never, { "clockFormat": { "alias": "clockFormat"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "dateAsEpoch": { "alias": "dateAsEpoch"; "required": false; "isSignal": true; }; "firstInterval": { "alias": "firstInterval"; "required": false; "isSignal": true; }; "rangeValidity": { "alias": "rangeValidity"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "givenTime": { "alias": "givenTime"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "triggerChange": { "alias": "triggerChange"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "disableUserInput": { "alias": "disableUserInput"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; }, { "timeEmitter": "timeEmitter"; }, never, never, false, never>;
54
56
  }
@@ -17,6 +17,8 @@ export declare class TimeRangePickerComponent implements OnInit {
17
17
  gap: import("@angular/core").InputSignal<string>;
18
18
  disableStartTime: import("@angular/core").InputSignal<boolean>;
19
19
  disableEndTime: import("@angular/core").InputSignal<boolean>;
20
+ fontSize: import("@angular/core").InputSignal<string>;
21
+ disableUserInput: import("@angular/core").InputSignal<boolean>;
20
22
  timeRangeEmitter: import("@angular/core").OutputEmitterRef<ITimeRange>;
21
23
  startTime: import("@angular/core").WritableSignal<ITime>;
22
24
  endTime: import("@angular/core").WritableSignal<ITime>;
@@ -42,5 +44,5 @@ export declare class TimeRangePickerComponent implements OnInit {
42
44
  checkTimeValidity(time: string, date: number): boolean;
43
45
  rangeValidation(validity: boolean): void;
44
46
  static ɵfac: i0.ɵɵFactoryDeclaration<TimeRangePickerComponent, never>;
45
- static ɵcmp: i0.ɵɵComponentDeclaration<TimeRangePickerComponent, "mis-timerangepicker", never, { "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; "isSignal": true; }; "startDateEpoch": { "alias": "startDateEpoch"; "required": false; "isSignal": true; }; "endDateEpoch": { "alias": "endDateEpoch"; "required": false; "isSignal": true; }; "givenStartTime": { "alias": "givenStartTime"; "required": false; "isSignal": true; }; "givenEndTime": { "alias": "givenEndTime"; "required": false; "isSignal": true; }; "clockFormat": { "alias": "clockFormat"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "disableStartTime": { "alias": "disableStartTime"; "required": false; "isSignal": true; }; "disableEndTime": { "alias": "disableEndTime"; "required": false; "isSignal": true; }; }, { "timeRangeEmitter": "timeRangeEmitter"; }, never, never, false, never>;
47
+ static ɵcmp: i0.ɵɵComponentDeclaration<TimeRangePickerComponent, "mis-timerangepicker", never, { "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "timezone": { "alias": "timezone"; "required": false; "isSignal": true; }; "startDateEpoch": { "alias": "startDateEpoch"; "required": false; "isSignal": true; }; "endDateEpoch": { "alias": "endDateEpoch"; "required": false; "isSignal": true; }; "givenStartTime": { "alias": "givenStartTime"; "required": false; "isSignal": true; }; "givenEndTime": { "alias": "givenEndTime"; "required": false; "isSignal": true; }; "clockFormat": { "alias": "clockFormat"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "disableStartTime": { "alias": "disableStartTime"; "required": false; "isSignal": true; }; "disableEndTime": { "alias": "disableEndTime"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "disableUserInput": { "alias": "disableUserInput"; "required": false; "isSignal": true; }; }, { "timeRangeEmitter": "timeRangeEmitter"; }, never, never, false, never>;
46
48
  }
@@ -1,71 +0,0 @@
1
- @import '../styles/mis-color-constants.scss';
2
-
3
- .mis-btn {
4
- background: none;
5
- outline: none;
6
- border: none;
7
- cursor: pointer;
8
- border-radius: 4px;
9
- vertical-align: middle;
10
- text-align: center;
11
- box-sizing: border-box;
12
- display: flex;
13
- align-items: center;
14
- text-decoration: none;
15
- justify-content: center;
16
-
17
- span,
18
- img {
19
- margin-right: 8px;
20
- }
21
-
22
- padding: 10px 16px;
23
- font-size: 16px;
24
- line-height: 24px;
25
- &.mis-btn-lg {
26
- padding: 16px;
27
- font-weight: bold;
28
- }
29
- &.mis-btn-sm {
30
- padding: 6px 12px;
31
- font-size: 14px;
32
- line-height: 20px;
33
- }
34
-
35
- background-color: transparent;
36
- color: var(--brand-primary, $pmry_500);
37
- &:hover {
38
- background-color: var(--brand-primary-hover, $tr_hover);
39
- }
40
- &:focus {
41
- background-color: var(--brand-primary-active, $tr_pressed);
42
- }
43
- &:disabled {
44
- color: var(--text-tertiary, $text-disabled);
45
- pointer-events: none;
46
- }
47
-
48
- &.mis-outline {
49
- border: 1px solid var(--brand-primary, $pmry_500);
50
-
51
- &:disabled {
52
- color: var(--text-tertiary, $text-disabled);
53
- border-color: var(--text-tertiary, $text-disabled);
54
- }
55
- }
56
-
57
- &.mis-primary {
58
- background-color: var(--brand-primary, $pmry_500);
59
- color: var(--bg-primary, $text_white);
60
- &:hover {
61
- background-color: var(--brand-primary-dark, $pmry_600);
62
- }
63
- &:focus {
64
- background-color: var(--brand-primary-darker, $pmry_700);
65
- }
66
- &:disabled {
67
- background-color: var(--border-primary, $grey_seperators);
68
- color: var(--text-tertiary, $text-disabled);
69
- }
70
- }
71
- }
@@ -1,20 +0,0 @@
1
- .mis-drawer {
2
- display: block;
3
- transition: all 300ms ease-out;
4
- }
5
- .mis-drawer-overlay {
6
- background: var(--bg-overlay-light, 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,187 +0,0 @@
1
- @import "../styles/mis-color-constants.scss";
2
-
3
- .input-container {
4
- position: relative;
5
- padding-bottom: 24px;
6
- &.mis-disabled {
7
- .input-wrapper {
8
- pointer-events: none !important;
9
- }
10
- }
11
- .input-wrapper {
12
- box-sizing: border-box;
13
- display: flex;
14
- align-items: center;
15
- flex-direction: row;
16
- flex-wrap: nowrap;
17
- transition: all ease-in 60ms;
18
- background-color: var(--bg-primary, $text_white);
19
- padding: 3px 16px; // DONE CHANGE
20
- gap: 16px;
21
- .mis-input {
22
- flex: 1 1 auto;
23
- z-index: 0; // Ensures a new stacking context
24
- position: relative;
25
- display: flex;
26
- align-items: center;
27
- }
28
- input {
29
- flex: 1 1 auto;
30
- border: none;
31
- outline: none;
32
- height: 100%;
33
- padding: 0;
34
- font-family: Lato;
35
- font-style: normal;
36
- font-weight: normal;
37
- font-size: 16px;
38
- height: 24px;
39
- color: var(--text-primary, $text_black);
40
- background-color: transparent;
41
- width: 100%;
42
- vertical-align: middle;
43
- position: relative;
44
- &::placeholder {
45
- transition: all ease-in 100ms;
46
- opacity: 0;
47
- transform-origin: left center;
48
- color: transparent;
49
- }
50
- }
51
- .mis-placeholder {
52
- position: absolute;
53
- font-family: Lato;
54
- font-style: normal;
55
- font-weight: normal;
56
- font-size: 16px;
57
- line-height: 24px;
58
- color: var(--text-secondary, $text_muted);
59
- transition: all ease-in 150ms;
60
- pointer-events: none;
61
- }
62
-
63
- &:focus-within {
64
- background-color: var(--bg-tertiary, $grey_bg);
65
- }
66
- &:focus-within {
67
- border: 1px solid $pmry_500;
68
- }
69
- [mis-input-act],
70
- [mis-input-icon] {
71
- width: 18px;
72
- height: 18px;
73
- color: var(--text-secondary, $text_muted);
74
- font-size: 24px;
75
- line-height: 18px;
76
- }
77
- [mis-input-act] {
78
- cursor: pointer;
79
- }
80
- }
81
- &.no-hint {
82
- padding-bottom: 0px;
83
- }
84
- &.has-value {
85
- .mis-input .mis-placeholder {
86
- color: transparent !important;
87
- }
88
- }
89
-
90
- &.rounded {
91
- input {
92
- box-sizing: initial;
93
- }
94
- &.sm {
95
- input {
96
- padding: 3px 16px;
97
- }
98
- }
99
- &.md {
100
- input {
101
- padding: 9px 16px;
102
- }
103
- }
104
- &.lg {
105
- input {
106
- padding: 15px 16px;
107
- }
108
- }
109
- .input-wrapper {
110
- border-radius: 4px;
111
- border: 1px solid var(--border-primary, $grey_seperators);
112
- padding: 0;
113
- // input:not(:disabled) {
114
- // &:hover,
115
- // &:focus {
116
- // background-color: $grey_bg;
117
- // }
118
- // }
119
- &:hover {
120
- background-color: var(--bg-tertiary, $grey_bg);
121
- }
122
- &:focus-within {
123
- border: 1px solid var(--brand-primary, $pmry_500);
124
- }
125
- input:not(:placeholder-shown) + .mis-placeholder {
126
- color: transparent !important;
127
- }
128
- .mis-placeholder {
129
- margin-left: 16px;
130
- transition-duration: 50ms;
131
- }
132
- }
133
- &.has-error {
134
- .input-wrapper {
135
- border: 1px solid var(--brand-error, $sem_error) !important;
136
- }
137
- }
138
- }
139
- &.floating {
140
- .input-wrapper {
141
- padding-top: 24px;
142
- padding-bottom: 7px; // DONE CHANGE
143
- border-bottom: 1px solid var(--border-primary, $grey_seperators);
144
- input:focus + .mis-placeholder {
145
- color: var(--brand-primary, $pmry_500) !important;
146
- }
147
- input:not(:placeholder-shown) + .mis-placeholder,
148
- input:focus + .mis-placeholder {
149
- transform: translateY(calc(-100% + 6px)) !important;
150
- font-size: 12px !important;
151
- letter-spacing: 0.2px !important;
152
- }
153
- &:focus-within {
154
- border: none;
155
- border-bottom: 1px solid var(--brand-primary, $pmry_500);
156
- input::placeholder {
157
- color: var(--text-secondary, $text_muted);
158
- opacity: 1;
159
- font-size: 16px;
160
- }
161
- }
162
- }
163
- &.has-error {
164
- .input-wrapper {
165
- border-bottom: 1px solid var(--brand-error, $sem_error) !important;
166
- .mis-placeholder {
167
- color: var(--brand-error, $sem_error) !important;
168
- }
169
- }
170
- }
171
- }
172
- [mis-input-hint],
173
- [mis-input-error] {
174
- position: absolute;
175
- left: 0;
176
- right: 0px;
177
- bottom: 0px;
178
- line-height: 24px;
179
- height: 24px;
180
- font-size: 12px;
181
- color: var(--text-secondary, $text_muted);
182
- letter-spacing: 0.2px;
183
- }
184
- [mis-input-error] {
185
- color: var(--brand-error, $sem_error);
186
- }
187
- }
package/modal/modal.scss DELETED
@@ -1,9 +0,0 @@
1
- .mis-modal {
2
- display: block;
3
- overflow: auto;
4
- padding: 8px;
5
- // transition: all 300ms ease-out;
6
- }
7
- .mis-modal-overlay {
8
- background: var(--bg-overlay, rgba(0, 0, 0, 0.32));
9
- }
Binary file