@wlcm/angular 19.2.3 → 19.2.5

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 (12) hide show
  1. package/datepicker/fesm2022/wlcm-angular-datepicker.mjs +1 -1
  2. package/datepicker/fesm2022/wlcm-angular-datepicker.mjs.map +1 -1
  3. package/datepicker/index.d.ts +1 -0
  4. package/forms/fesm2022/wlcm-angular-forms.mjs +2 -2
  5. package/forms/fesm2022/wlcm-angular-forms.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/components/forms/_autocomplete.scss +6 -2
  8. package/styles/components/forms/_checkbox.scss +53 -60
  9. package/styles/components/forms/_form-field.scss +1 -4
  10. package/styles/components/forms/_radio.scss +56 -43
  11. package/styles/components/forms/_select.scss +37 -58
  12. package/styles/components/forms/partials/_dropdown-panel.scss +40 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wlcm/angular",
3
- "version": "19.2.3",
3
+ "version": "19.2.5",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "module": "./index.mjs",
package/styles/components/forms/_autocomplete.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use 'sass:map';
2
- @use '../../core/utils' as utils;
2
+ @use '../../core/utils';
3
+ @use 'partials/dropdown-panel';
3
4
 
4
5
  @mixin theme($theme-config) {
5
6
  $theme: utils.using-theme($theme_config);
@@ -22,8 +23,11 @@
22
23
 
23
24
  .spinner {
24
25
  font-size: 18px;
25
- font-size: 18px;
26
26
  }
27
27
  }
28
28
  }
29
+
30
+ .wlcm-autocomplete-panel {
31
+ @include dropdown-panel.theme($theme-config);
32
+ }
29
33
  }
package/styles/components/forms/_checkbox.scss CHANGED
@@ -4,76 +4,69 @@
4
4
  @mixin theme($theme-config) {
5
5
  $theme: utils.using-theme($theme_config);
6
6
 
7
- mat-checkbox {
8
- .mdc-checkbox {
9
- padding: 0 !important;
10
- }
11
-
12
- .mat-ripple,
13
- .mdc-checkbox__ripple {
14
- display: none !important;
15
- }
16
-
17
- .mdc-checkbox__background {
18
- width: 16px;
19
- height: 16px;
20
- box-sizing: border-box;
21
- top: 0 !important;
22
- left: 0 !important;
23
- background: #ffffff !important;
24
- border: 1px solid map-get($theme, field-outline-color) !important;
25
- border-radius: 4px;
7
+ .wlcm-checkbox {
8
+ mat-checkbox {
9
+ .mdc-checkbox {
10
+ padding: 0;
11
+ }
26
12
 
27
- .mdc-checkbox__checkmark {
28
- transition: 0s !important;
13
+ .mat-ripple,
14
+ .mdc-checkbox__ripple {
15
+ display: none;
29
16
  }
30
- }
31
17
 
32
- .mdc-checkbox__checkmark-path {
33
- stroke-width: 3px;
34
- stroke: map-get($theme, primary-color) !important;
35
- d: path('M 5 11.7 L 11 16.6 L 19 7') !important;
36
- }
18
+ .mdc-checkbox__background {
19
+ $border-color: map-get($theme, field-outline-color);
20
+ --mdc-checkbox-unselected-focus-icon-color: #{$border-color};
21
+ width: 16px;
22
+ height: 16px;
23
+ box-sizing: border-box;
24
+ top: 0;
25
+ left: 0;
26
+ border: 1px solid $border-color;
27
+ border-radius: 4px;
37
28
 
38
- label {
39
- padding-left: 8px !important;
40
- padding-bottom: 2px !important;
41
- letter-spacing: 0.41px;
42
- line-height: 24px;
43
- user-select: none;
44
- font-size: 14px;
45
- }
29
+ .mdc-checkbox__checkmark {
30
+ transition: 0s;
31
+ }
32
+ }
46
33
 
47
- &.mat-mdc-checkbox-checked {
48
- .mdc-checkbox__background {
49
- color: map-get($theme, primary-color) !important;
50
- border-color: map-get($theme, primary-color) !important;
34
+ .mdc-checkbox__checkmark-path {
35
+ stroke-width: 3px;
36
+ stroke: map-get($theme, primary-color);
37
+ d: path('M 5 11.7 L 11 16.6 L 19 7');
51
38
  }
52
- }
53
39
 
54
- .mdc-checkbox__native-control {
55
- top: 0 !important;
56
- left: 0 !important;
57
- height: auto !important;
58
- width: auto !important;
59
- }
60
- }
40
+ label {
41
+ padding-left: 8px;
42
+ padding-bottom: 2px;
43
+ letter-spacing: 0.41px;
44
+ line-height: 24px;
45
+ user-select: none;
46
+ font-size: 14px;
47
+ }
61
48
 
62
- .mat-pseudo-checkbox {
63
- width: 16px !important;
64
- height: 16px !important;
65
- border: 1px solid map-get($theme, field-outline-color) !important;
66
- background: white !important;
67
- border-radius: 4px !important;
49
+ .mdc-checkbox__native-control {
50
+ top: 0;
51
+ left: 0;
52
+ height: auto;
53
+ width: auto;
54
+ }
68
55
 
69
- &.mat-pseudo-checkbox-checked {
70
- border-color: map-get($theme, primary-color) !important;
56
+ // States
57
+ &:hover {
58
+ .mdc-checkbox__background {
59
+ $border-hover-color: map-get($theme, text-black-color);
60
+ --mdc-checkbox-unselected-focus-icon-color: #{$border-hover-color};
61
+ border-color: $border-hover-color;
62
+ }
63
+ }
71
64
 
72
- &::after {
73
- width: 5px !important;
74
- height: 3px !important;
75
- border-color: map-get($theme, primary-color);
76
- top: -1.5px !important;
65
+ &.mat-mdc-checkbox-checked {
66
+ .mdc-checkbox__background {
67
+ border-color: map-get($theme, primary-color) !important;
68
+ background-color: #ffffff !important;
69
+ }
77
70
  }
78
71
  }
79
72
  }
package/styles/components/forms/_form-field.scss CHANGED
@@ -4,10 +4,6 @@
4
4
  @mixin theme($theme-config) {
5
5
  $theme: utils.using-theme($theme_config);
6
6
 
7
- input {
8
- color: map-get($theme, field-text-color);
9
- }
10
-
11
7
  .wlcm-form-field {
12
8
  display: block;
13
9
 
@@ -86,6 +82,7 @@
86
82
  font-size: 14px;
87
83
  letter-spacing: 0.41px;
88
84
  font-family: map-get($theme, regular-font-family);
85
+ color: map-get($theme, field-text-color);
89
86
 
90
87
  &:disabled {
91
88
  background-color: inherit;
package/styles/components/forms/_radio.scss CHANGED
@@ -4,62 +4,75 @@
4
4
  @mixin theme($theme-config) {
5
5
  $theme: utils.using-theme($theme_config);
6
6
 
7
- .mat-mdc-radio-group {
8
- display: grid;
9
- }
10
-
11
- .mat-mdc-radio-button {
12
- label {
13
- font-size: 14px;
14
- font-family: map-get($theme, regular-font-family);
15
- color: map-get($theme, text-black-color);
16
- -webkit-font-smoothing: initial !important;
17
- font-weight: normal;
7
+ // TODO replace with `wlcm-radio-group`
8
+ .wlcm-form-field {
9
+ .mat-mdc-radio-group {
10
+ display: grid;
18
11
  }
19
12
 
20
- .mat-mdc-radio-touch-target {
21
- width: 22px;
22
- height: 22px;
23
- }
13
+ .mat-mdc-radio-button {
14
+ label {
15
+ cursor: pointer;
16
+ font-size: 14px;
17
+ font-family: map-get($theme, regular-font-family);
18
+ color: map-get($theme, text-black-color);
19
+ -webkit-font-smoothing: initial;
20
+ font-weight: normal;
21
+ }
24
22
 
25
- .mdc-radio {
26
- width: 16px !important;
27
- height: 16px !important;
28
- padding: 6px 6px 6px 0 !important;
23
+ .mat-mdc-radio-touch-target {
24
+ width: 22px;
25
+ height: 22px;
26
+ }
29
27
 
30
- &__background {
31
- width: 16px !important;
32
- height: 16px !important;
28
+ .mdc-radio {
29
+ width: 16px;
30
+ height: 16px;
31
+ padding: 6px 6px 6px 0;
33
32
 
34
- &::before {
35
- display: none !important;
33
+ .mat-ripple {
34
+ display: none;
36
35
  }
37
- }
38
36
 
39
- &__inner-circle {
40
- top: -2px !important;
41
- left: -2px !important;
42
- }
43
- }
37
+ &__background {
38
+ width: 16px;
39
+ height: 16px;
44
40
 
45
- &:not(.mat-mdc-radio-checked) {
46
- .mdc-radio__outer-circle {
47
- border: 1px solid map-get($theme, field-outline-color) !important;
48
- }
49
- }
41
+ &::before {
42
+ display: none;
43
+ }
44
+ }
45
+
46
+ &__inner-circle {
47
+ top: -2px;
48
+ left: -2px;
49
+ }
50
50
 
51
- &.mat-mdc-radio-checked {
52
- .mdc-radio__outer-circle {
53
- border-width: 1px !important;
51
+ &__outer-circle {
52
+ $border-color: map-get($theme, field-outline-color);
53
+ --mdc-radio-unselected-icon-color: #{$border-color};
54
+ border: 1px solid $border-color;
55
+ }
54
56
  }
55
57
 
56
- .mdc-radio__inner-circle {
57
- transform: scale(0.4) !important;
58
+ // States
59
+ .mdc-form-field:hover {
60
+ .mdc-radio__outer-circle {
61
+ $border-hover-color: map-get($theme, text-black-color);
62
+ --mdc-radio-unselected-icon-color: #{$border-hover-color};
63
+ border: 1px solid $border-hover-color;
64
+ }
58
65
  }
59
- }
60
66
 
61
- .mat-radio-ripple {
62
- display: none !important;
67
+ &.mat-mdc-radio-checked {
68
+ .mdc-radio__outer-circle {
69
+ border-width: 1px;
70
+ }
71
+
72
+ .mdc-radio__inner-circle {
73
+ transform: scale(0.4) !important;
74
+ }
75
+ }
63
76
  }
64
77
  }
65
78
  }
package/styles/components/forms/_select.scss CHANGED
@@ -1,88 +1,67 @@
1
1
  @use 'sass:map';
2
- @use '../../core/utils' as utils;
2
+ @use '../../core/utils';
3
+ @use 'partials/dropdown-panel';
3
4
 
4
5
  @mixin theme($theme-config) {
5
6
  $theme: utils.using-theme($theme_config);
6
7
 
7
- .mat-mdc-select-panel,
8
- .mat-mdc-autocomplete-panel {
9
- padding: 0 !important;
10
- }
11
-
12
8
  .wlcm-form-field.wlcm-field-disabled {
13
- wlcm-select {
14
- pointer-events: none !important;
9
+ .wlcm-select {
10
+ pointer-events: none;
15
11
  }
16
12
  }
17
13
 
18
- wlcm-select {
14
+ .wlcm-select {
19
15
  width: 100%;
20
16
  display: flex;
21
17
  align-items: center;
22
18
  overflow: hidden;
23
19
  cursor: pointer;
24
20
 
25
- .wlcm-select-arrow {
26
- margin-left: 8px;
27
- }
28
- }
29
-
30
- // Select
31
- .wlcm-select-panel,
32
- .wlcm-autocomplete-panel {
33
- border: 1px solid map-get($theme, focus-field-outline-color);
34
- border-radius: 4px !important;
35
- box-shadow: none !important;
36
- overflow: hidden;
37
- }
38
-
39
- mat-select {
40
- line-height: 18px !important;
41
- overflow: hidden;
42
-
43
- .mat-mdc-select-arrow-wrapper {
44
- display: none !important;
45
- }
21
+ mat-select {
22
+ line-height: 18px;
23
+ overflow: hidden;
46
24
 
47
- .mat-mdc-select-trigger {
48
- height: 18px !important;
25
+ .mat-mdc-select-trigger {
26
+ height: 18px;
49
27
 
50
- .mat-mdc-select-min-line {
51
- font-size: 14px;
52
- -webkit-font-smoothing: initial !important;
53
- letter-spacing: 0.41px;
28
+ .mat-mdc-select-arrow-wrapper {
29
+ display: none;
30
+ }
54
31
 
55
- &.mat-mdc-select-placeholder {
32
+ .mat-mdc-select-placeholder {
33
+ font-size: 14px;
34
+ -webkit-font-smoothing: initial;
35
+ letter-spacing: 0.41px;
56
36
  color: map-get($theme, placeholder-color);
57
37
  }
58
38
  }
59
39
  }
40
+
41
+ .wlcm-select-arrow {
42
+ margin-left: 8px;
43
+ }
60
44
  }
61
45
 
62
- // Option
63
- .mat-mdc-option {
64
- height: 32px;
65
- min-height: 32px !important;
66
- padding: 0 8px !important;
46
+ .wlcm-select-panel {
47
+ @include dropdown-panel.theme($theme-config);
67
48
 
68
- &.mdc-list-item--selected {
69
- background-color: map-get($theme, selected-option-color) !important;
70
- }
49
+ .mat-pseudo-checkbox {
50
+ width: 16px;
51
+ height: 16px;
52
+ border: 1px solid map-get($theme, field-outline-color);
53
+ border-radius: 4px;
71
54
 
72
- .mdc-list-item__primary-text {
73
- overflow: hidden;
74
- text-overflow: ellipsis;
75
- white-space: nowrap !important;
76
- font-family: map-get($theme, regular-font-family) !important;
77
- -webkit-font-smoothing: initial !important;
78
- font-size: 14px !important;
79
- letter-spacing: 0.41px;
80
- line-height: 24px;
81
- }
55
+ &.mat-pseudo-checkbox-checked {
56
+ border-color: map-get($theme, primary-color);
57
+ background-color: white;
82
58
 
83
- &.wlcm-custom-option-content {
84
- .mdc-list-item__primary-text {
85
- width: 100%;
59
+ &::after {
60
+ width: 5px;
61
+ height: 3px;
62
+ border-color: map-get($theme, primary-color);
63
+ top: -1.5px;
64
+ }
86
65
  }
87
66
  }
88
67
  }
package/styles/components/forms/partials/_dropdown-panel.scss ADDED
@@ -0,0 +1,40 @@
1
+ @use 'sass:map';
2
+ @use '../../../core/utils' as utils;
3
+
4
+ @mixin theme($theme-config) {
5
+ $theme: utils.using-theme($theme_config);
6
+
7
+ // Panel (cdk-overlay-pane)
8
+ border: 1px solid map-get($theme, focus-field-outline-color);
9
+ border-radius: 4px;
10
+ box-shadow: none;
11
+ overflow: hidden;
12
+
13
+ .mdc-menu-surface {
14
+ padding: 0;
15
+ }
16
+
17
+ // Option
18
+ .mat-mdc-option {
19
+ height: 32px;
20
+ min-height: 32px;
21
+ padding: 0 8px;
22
+
23
+ .mdc-list-item__primary-text {
24
+ width: 100%;
25
+ overflow: hidden;
26
+ text-overflow: ellipsis;
27
+ white-space: nowrap;
28
+ font-family: map-get($theme, regular-font-family);
29
+ -webkit-font-smoothing: initial;
30
+ font-size: 14px;
31
+ letter-spacing: 0.41px;
32
+ line-height: 24px;
33
+ }
34
+
35
+ // States
36
+ &.mdc-list-item--selected {
37
+ background-color: map-get($theme, selected-option-color) !important;
38
+ }
39
+ }
40
+ }