@progressio_resources/gravity-design-system 1.0.11 → 1.1.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 (25) hide show
  1. package/esm2020/lib/components/gravity-button/gravity-button.component.mjs +5 -5
  2. package/esm2020/lib/components/gravity-calendar/gravity-calendar.component.mjs +59 -38
  3. package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +21 -24
  4. package/esm2020/lib/components/gravity-icon/gravity-icon.component.mjs +8 -4
  5. package/esm2020/lib/components/gravity-switch/gravity-switch.component.mjs +18 -7
  6. package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +24 -24
  7. package/fesm2015/progressio_resources-gravity-design-system.mjs +137 -105
  8. package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
  9. package/fesm2020/progressio_resources-gravity-design-system.mjs +137 -105
  10. package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
  11. package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +18 -10
  12. package/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.d.ts +9 -10
  13. package/lib/components/gravity-icon/gravity-icon.component.d.ts +3 -1
  14. package/lib/components/gravity-switch/gravity-switch.component.d.ts +15 -3
  15. package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +4 -3
  16. package/package.json +2 -2
  17. package/src/lib/assets/icons/arrow_down.svg +3 -0
  18. package/src/lib/assets/icons/arrow_right.svg +3 -0
  19. package/src/lib/assets/icons/arrow_up.svg +3 -0
  20. package/src/lib/assets/json/icons.json +12 -0
  21. package/src/lib/styles/_datepicker.scss +62 -42
  22. package/src/lib/styles/_shared.scss +1 -0
  23. package/src/lib/styles/overwrite/pretty-checkbox/_variables.scss +0 -2
  24. package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss +9 -7
  25. package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss +1 -1
package/lib/components/gravity-switch/gravity-switch.component.d.ts CHANGED
@@ -1,6 +1,18 @@
1
+ import { EventEmitter, OnInit } from '@angular/core';
2
+ import { PrettyCheckBoxChange } from "ngx-pretty-checkbox/lib/model";
1
3
  import * as i0 from "@angular/core";
2
- export declare class GravitySwitchComponent {
3
- disabled: boolean;
4
+ export declare class GravitySwitchComponent implements OnInit {
5
+ data: {
6
+ currentLang?: string;
7
+ customCheck?: boolean;
8
+ cypressTag?: string;
9
+ label: string;
10
+ required?: boolean;
11
+ state?: 'readonly' | 'disabled' | 'enabled';
12
+ };
13
+ switchResponse: EventEmitter<boolean>;
14
+ ngOnInit(): void;
15
+ toggleSwitchHandler($event: PrettyCheckBoxChange): void;
4
16
  static ɵfac: i0.ɵɵFactoryDeclaration<GravitySwitchComponent, never>;
5
- static ɵcmp: i0.ɵɵComponentDeclaration<GravitySwitchComponent, "gravity-switch", never, { "disabled": "disabled"; }, {}, never, ["*"], false, never>;
17
+ static ɵcmp: i0.ɵɵComponentDeclaration<GravitySwitchComponent, "gravity-switch", never, { "data": "data"; }, { "switchResponse": "response"; }, never, ["*"], false, never>;
6
18
  }
package/lib/components/gravity-text-field/gravity-text-field.component.d.ts CHANGED
@@ -25,12 +25,13 @@ export declare class GravityTextFieldComponent implements AfterViewInit, OnInit
25
25
  private inputElement;
26
26
  focusInput: boolean;
27
27
  inputValue: string;
28
+ private readonly placeholders;
28
29
  ngOnInit(): void;
29
30
  ngAfterViewInit(): void;
30
- private readonly placeholders;
31
31
  getPlaceholder(): string;
32
- changeInputValue(): void;
33
32
  clearInput(): void;
33
+ onInputKeyup(): void;
34
+ private changeInputValue;
34
35
  static ɵfac: i0.ɵɵFactoryDeclaration<GravityTextFieldComponent, never>;
35
- static ɵcmp: i0.ɵɵComponentDeclaration<GravityTextFieldComponent, "gravity-text-field", never, { "data": "data"; }, { "textFieldValueResponse": "textFieldValueResponse"; }, never, never, false, never>;
36
+ static ɵcmp: i0.ɵɵComponentDeclaration<GravityTextFieldComponent, "gravity-text-field", never, { "data": "data"; }, { "textFieldValueResponse": "response"; }, never, never, false, never>;
36
37
  }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@progressio_resources/gravity-design-system",
3
3
  "description": "Gravity Design System",
4
- "version": "1.0.11",
4
+ "version": "1.1.1",
5
5
  "license": "SEE LICENSE IN LIBRARY-LICENSE",
6
6
  "peerDependencies": {
7
7
  "@angular/common": "^15.1.0",
8
8
  "@angular/core": "^15.1.0",
9
- "@angular/localize": "^15.1.5",
9
+ "@angular/localize": "^15.2.9",
10
10
  "@ng-bootstrap/ng-bootstrap": "^14.2.0",
11
11
  "@ng-select/ng-select": "^10.0.4",
12
12
  "@popperjs/core": "^2.11.6",
package/src/lib/assets/icons/arrow_down.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="11.115" viewBox="0 0 18 11.115">
2
+ <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(-9 -12.885)" fill="var(--icon-color, #888)"/>
3
+ </svg>
package/src/lib/assets/icons/arrow_right.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="11.115" height="18" viewBox="0 0 11.115 18">
2
+ <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(-12.885 27) rotate(-90)" fill="var(--icon-color, #888)"/>
3
+ </svg>
package/src/lib/assets/icons/arrow_up.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="11.115" viewBox="0 0 18 11.115">
2
+ <path d="M24.885,12.885,18,19.755l-6.885-6.87L9,15l9,9,9-9Z" transform="translate(27 24) rotate(180)" fill="var(--icon-color, #888)"/>
3
+ </svg>
package/src/lib/assets/json/icons.json CHANGED
@@ -1,5 +1,17 @@
1
1
  {
2
2
  "iconImageFiles": [
3
+ {
4
+ "iconName": "arrow_down",
5
+ "iconPath": "/assets/gravity/icons/arrow_down.svg"
6
+ },
7
+ {
8
+ "iconName": "arrow_right",
9
+ "iconPath": "/assets/gravity/icons/arrow_right.svg"
10
+ },
11
+ {
12
+ "iconName": "arrow_up",
13
+ "iconPath": "/assets/gravity/icons/arrow_up.svg"
14
+ },
3
15
  {
4
16
  "iconName": "calendar",
5
17
  "iconPath": "/assets/gravity/icons/calendar.svg"
package/src/lib/styles/_datepicker.scss CHANGED
@@ -12,56 +12,63 @@ ngb-datepicker.gravity-datepicker-dialog {
12
12
  border-top-left-radius: $border-radius-system;
13
13
  border-top-right-radius: $border-radius-system;
14
14
  color: var(--on-bg-calendar-nav-primary);
15
- height: 50px;
16
- min-width: 284px;
17
- padding: 10px;
15
+ height: 3.125rem;
16
+ min-width: 17.75rem;
17
+ padding: 0.625rem;
18
18
 
19
19
  ngb-datepicker-navigation {
20
- .ngb-dp-arrow button {
21
- @extend .hr-label, .sm-regular;
22
-
23
- border-radius: 50%;
24
- color: var(--arrow-calendar-active-primary);
25
- cursor: pointer;
26
- height: 32px;
27
- margin: 0;
28
- outline: none;
29
- padding: 0;
30
- width: 32px;
31
-
32
- span {
33
- border: none;
34
- display: inline-block;
35
- font-size: 28px;
36
- height: 100%;
37
- line-height: 30px;
20
+ .ngb-dp-arrow {
21
+ button {
22
+ @extend .hr-label, .sm-regular;
23
+
24
+ border-radius: 50%;
25
+ color: var(--arrow-calendar-active-primary);
26
+ cursor: pointer;
27
+ height: 2rem;
38
28
  margin: 0;
39
- position: relative;
40
- transform: none;
41
- width: 100%;
29
+ outline: none;
30
+ padding: 0;
31
+ width: 2rem;
32
+
33
+ span {
34
+ border: none;
35
+ display: inline-block;
36
+ font-size: 1.75rem;
37
+ height: 100%;
38
+ line-height: 1;
39
+ margin: 0;
40
+ position: relative;
41
+ transform: none;
42
+ width: 100%;
43
+ }
44
+
45
+ &:not([disabled]):hover {
46
+ background-color: var(--bg-arrow-calendar-hover-primary);
47
+ color: var(--arrow-calendar-hover-primary);
48
+ }
49
+
50
+ &[disabled] {
51
+ color: var(--arrow-calendar-disabled-primary);
52
+ }
42
53
  }
43
54
 
44
- &:not([disabled]):hover {
45
- background-color: var(--bg-arrow-calendar-hover-primary);
46
- color: var(--arrow-calendar-hover-primary);
47
- }
48
-
49
- &[disabled] {
50
- color: var(--arrow-calendar-disabled-primary);
55
+ &:has(button[disabled]) {
51
56
  cursor: not-allowed;
52
57
  }
53
- }
54
58
 
55
- .ngb-dp-arrow:not(.right) button span:before {
56
- content: "‹";
57
- }
59
+ &:not(.right) button span:before {
60
+ content: "‹";
61
+ }
58
62
 
59
- .ngb-dp-arrow.right button span:after {
60
- content: "›";
63
+ &.right button span:after {
64
+ content: "›";
65
+ }
61
66
  }
62
67
 
63
68
  .ngb-dp-month-name {
64
69
  @extend .hr-label, .md-regular;
70
+
71
+ background-color: var(--bg-calendar-nav-primary);
65
72
  }
66
73
  }
67
74
  }
@@ -69,9 +76,22 @@ ngb-datepicker.gravity-datepicker-dialog {
69
76
  .ngb-dp-content {
70
77
  @extend .hr-label, .sm-regular;
71
78
 
72
- min-height: 212px;
73
- min-width: 264px;
74
- padding: 10px;
79
+ min-width: 16.5rem;
80
+ padding: 0.625rem;
81
+
82
+ .ngb-dp-weekdays {
83
+ background-color: var(--bg-calender-primary);
84
+ border: none;
85
+
86
+ .ngb-dp-weekday {
87
+ @extend .hr-label, .sm-regular;
88
+ color: var(--on-bg-calender-primary);
89
+ }
90
+ }
91
+
92
+ .ngb-dp-week-number {
93
+ @extend .hr-label, .sm-regular;
94
+ }
75
95
 
76
96
  .ngb-dp-day {
77
97
  border-radius: 50%;
@@ -92,8 +112,8 @@ ngb-datepicker.gravity-datepicker-dialog {
92
112
  }
93
113
 
94
114
  &.bg-primary.text-white {
95
- background-color: var(--bg-number-calendar-pressed-primary);
96
- color: var(--number-calendar-pressed-primary);
115
+ background-color: var(--bg-number-calendar-pressed-primary) !important;
116
+ color: var(--number-calendar-pressed-primary) !important;
97
117
  }
98
118
  }
99
119
  }
package/src/lib/styles/_shared.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $border-radius-system: 0.625rem;
2
+ $input-height: 3rem;
2
3
 
3
4
  .text-negative {
4
5
  color: var(--negative-primary);
package/src/lib/styles/overwrite/pretty-checkbox/_variables.scss CHANGED
@@ -30,9 +30,7 @@ $pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info),
30
30
 
31
31
  // position
32
32
  $pretty-top: 7;
33
- $pretty-top-switch: ($pretty-top * 2) * 1%;
34
33
  $pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});
35
- $pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});
36
34
 
37
35
  // dev
38
36
  $pretty--debug: false !default;
package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @use 'mixin';
2
2
 
3
3
  .#{$pretty--class-name}.p-switch {
4
- input{
5
- min-width:2em;
4
+ input {
6
5
  &:checked ~ .state, &:disabled ~ .state {
7
6
  @include mixin.switchColor(bg-switch-disabled-primary);
8
7
  }
9
8
  }
10
9
 
11
10
  .state {
11
+ height: 100%;
12
12
  position: relative;
13
13
 
14
14
  &:before {
@@ -16,12 +16,11 @@
16
16
  border: 1px solid var(--bg-switch-off-primary);
17
17
  background-color: var(--bg-switch-off-primary);
18
18
  border-radius: 60px;
19
- width: 2em;
19
+ width: 3.125rem;
20
20
  box-sizing: unset;
21
- height: $pretty--box-size;
21
+ height: calc(100% - 2px);
22
22
  position: absolute;
23
23
  top: 0;
24
- top: $pretty-top-offset-switch;
25
24
  z-index: $pretty--z-index-back;
26
25
  transition: all 0.5s ease;
27
26
  }
@@ -33,12 +32,15 @@
33
32
  &:after {
34
33
  transition: all 0.5s ease;
35
34
  border-radius: 100%;
36
- left: 0;
35
+ left: 5%;
37
36
  border-color: transparent;
38
37
  transform: scale(0.8);
38
+ height: 1.375rem;
39
+ top: 9%;
40
+ width: 1.375rem;
39
41
  }
40
42
 
41
- &:before{
43
+ &:before {
42
44
  border: 1px solid var(--on-bg-switch-off-primary);
43
45
  background-color: var(--on-bg-switch-off-primary);
44
46
  }
package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss CHANGED
@@ -10,6 +10,6 @@
10
10
 
11
11
  label:after {
12
12
  background-color: var(--on-#{$varColorName}) !important;
13
- left: 1em;
13
+ left: 55%;
14
14
  }
15
15
  }