ngx-cho-components 4.0.0 → 4.0.2

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 (10) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/styles/_cards.scss +88 -90
  4. package/styles/_contact-info.scss +4 -6
  5. package/styles/_detail-page.scss +22 -24
  6. package/styles/_forms.scss +26 -28
  7. package/styles/_pager.scss +34 -36
  8. package/styles/_responsive.scss +18 -20
  9. package/styles/_search-card.scss +33 -35
  10. package/styles/_status.scss +6 -8
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install --save-exact ngx-cho-common@4.0.0 ngx-cho-components@4.0.0
8
+ npm install --save-exact ngx-cho-common@4.0.2 ngx-cho-components@4.0.2
9
9
  ```
10
10
 
11
11
  Applications must provide compatible Angular Common, Core, and Forms packages plus PrimeNG 19.
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "ngx-cho-components",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.0",
6
6
  "@angular/core": "^19.2.0",
7
7
  "@angular/forms": "^19.2.0",
8
- "ngx-cho-common": "^4.0.0",
8
+ "ngx-cho-common": "^4.0.2",
9
9
  "primeng": "^19.0.0"
10
10
  },
11
11
  "dependencies": {
package/styles/_cards.scss CHANGED
@@ -1,116 +1,114 @@
1
1
  @use 'ngx-cho-common/styles/mixins' as cho;
2
2
 
3
- @layer components {
4
- .cho-card {
5
- @include cho.cho-surface(var(--cho-shell-shadow, none), var(--cho-card-radius, 8px));
6
- display: block;
7
- margin-block-end: 1rem;
8
-
9
- &--embedded {
10
- background: transparent;
11
- border: 0;
12
- border-radius: 0;
13
- box-shadow: none;
14
- margin-block-end: 0;
15
- }
16
-
17
- &__body {
18
- min-width: 0;
3
+ .cho-card {
4
+ @include cho.cho-surface(var(--cho-shell-shadow, none), var(--cho-card-radius, 8px));
5
+ display: block;
6
+ margin-block-end: 1rem;
7
+
8
+ &--embedded {
9
+ background: transparent;
10
+ border: 0;
11
+ border-radius: 0;
12
+ box-shadow: none;
13
+ margin-block-end: 0;
14
+ }
19
15
 
20
- &--none {
21
- padding: 0;
22
- }
16
+ &__body {
17
+ min-width: 0;
23
18
 
24
- &--compact {
25
- padding: 0.75rem;
26
- }
19
+ &--none {
20
+ padding: 0;
21
+ }
27
22
 
28
- &--comfortable {
29
- padding: var(--cho-card-body-padding, 1rem);
30
- }
23
+ &--compact {
24
+ padding: 0.75rem;
31
25
  }
32
26
 
33
- &__tabs {
34
- border-block-end: 1px solid var(--surface-border);
35
- padding: 0.75rem 1rem;
27
+ &--comfortable {
28
+ padding: var(--cho-card-body-padding, 1rem);
36
29
  }
37
30
  }
38
31
 
39
- .cho-card-header {
40
- align-items: center;
32
+ &__tabs {
41
33
  border-block-end: 1px solid var(--surface-border);
42
- display: flex;
43
- flex-wrap: wrap;
44
- gap: 1rem;
45
- justify-content: space-between;
46
- padding: var(--cho-card-header-padding, 0.75rem 1rem);
47
-
48
- &__title {
49
- @include cho.cho-title(1.25rem);
50
- line-height: 1.25;
51
- }
34
+ padding: 0.75rem 1rem;
35
+ }
36
+ }
52
37
 
53
- h1#{&}__title {
54
- font-size: 1.5rem;
55
- }
38
+ .cho-card-header {
39
+ align-items: center;
40
+ border-block-end: 1px solid var(--surface-border);
41
+ display: flex;
42
+ flex-wrap: wrap;
43
+ gap: 1rem;
44
+ justify-content: space-between;
45
+ padding: var(--cho-card-header-padding, 0.75rem 1rem);
46
+
47
+ &__title {
48
+ @include cho.cho-title(1.25rem);
49
+ line-height: 1.25;
50
+ }
56
51
 
57
- h2#{&}__title {
58
- font-size: 1.375rem;
59
- }
52
+ h1#{&}__title {
53
+ font-size: 1.5rem;
54
+ }
60
55
 
61
- h4#{&}__title {
62
- font-size: 1.125rem;
63
- }
56
+ h2#{&}__title {
57
+ font-size: 1.375rem;
58
+ }
64
59
 
65
- h5#{&}__title,
66
- h6#{&}__title {
67
- font-size: 1rem;
68
- }
60
+ h4#{&}__title {
61
+ font-size: 1.125rem;
69
62
  }
70
63
 
71
- .cho-card-toolbar {
72
- align-items: center;
73
- display: flex;
74
- flex-wrap: wrap;
75
- gap: 0.5rem;
76
- justify-content: flex-end;
77
- min-width: 0;
64
+ h5#{&}__title,
65
+ h6#{&}__title {
66
+ font-size: 1rem;
78
67
  }
68
+ }
79
69
 
80
- .cho-card-filters {
81
- align-items: end;
82
- border-block-end: 1px solid var(--surface-border);
70
+ .cho-card-toolbar {
71
+ align-items: center;
72
+ display: flex;
73
+ flex-wrap: wrap;
74
+ gap: 0.5rem;
75
+ justify-content: flex-end;
76
+ min-width: 0;
77
+ }
78
+
79
+ .cho-card-filters {
80
+ align-items: end;
81
+ border-block-end: 1px solid var(--surface-border);
82
+ display: flex;
83
+ flex-wrap: wrap;
84
+ gap: 0.75rem;
85
+ padding: var(--cho-card-filters-padding, 0.75rem 1rem);
86
+ }
87
+
88
+ .cho-card-tabs {
89
+ border-block-end: 1px solid var(--surface-border);
90
+ padding-inline: 1rem;
91
+
92
+ ul {
83
93
  display: flex;
84
- flex-wrap: wrap;
85
- gap: 0.75rem;
86
- padding: var(--cho-card-filters-padding, 0.75rem 1rem);
94
+ gap: 1rem;
95
+ list-style: none;
96
+ margin: 0;
97
+ padding: 0;
87
98
  }
88
99
 
89
- .cho-card-tabs {
90
- border-block-end: 1px solid var(--surface-border);
91
- padding-inline: 1rem;
92
-
93
- ul {
94
- display: flex;
95
- gap: 1rem;
96
- list-style: none;
97
- margin: 0;
98
- padding: 0;
99
- }
100
+ &__link {
101
+ border-block-end: 2px solid transparent;
102
+ color: inherit;
103
+ cursor: pointer;
104
+ display: block;
105
+ padding-block: 0.75rem;
106
+ text-decoration: none;
100
107
 
101
- &__link {
102
- border-block-end: 2px solid transparent;
103
- color: inherit;
104
- cursor: pointer;
105
- display: block;
106
- padding-block: 0.75rem;
107
- text-decoration: none;
108
-
109
- &:hover,
110
- &.active {
111
- border-block-end-color: currentColor;
112
- color: var(--p-primary-color, #211c72);
113
- }
108
+ &:hover,
109
+ &.active {
110
+ border-block-end-color: currentColor;
111
+ color: var(--p-primary-color, #211c72);
114
112
  }
115
113
  }
116
114
  }
package/styles/_contact-info.scss CHANGED
@@ -1,9 +1,7 @@
1
- @layer components {
2
- .cho-contact-info {
3
- overflow-wrap: anywhere;
1
+ .cho-contact-info {
2
+ overflow-wrap: anywhere;
4
3
 
5
- &__line {
6
- margin: 0;
7
- }
4
+ &__line {
5
+ margin: 0;
8
6
  }
9
7
  }
package/styles/_detail-page.scss CHANGED
@@ -1,31 +1,29 @@
1
- @layer components {
2
- cho-detail-page {
3
- display: grid;
4
- gap: 0.75rem;
5
- min-width: 0;
6
- }
1
+ cho-detail-page {
2
+ display: grid;
3
+ gap: 0.75rem;
4
+ min-width: 0;
5
+ }
7
6
 
8
- cho-detail-page > cho-card > .cho-card {
9
- margin-block-end: 0;
10
- width: 100%;
11
- }
7
+ cho-detail-page > cho-card > .cho-card {
8
+ margin-block-end: 0;
9
+ width: 100%;
10
+ }
12
11
 
13
- .cho-detail-page__body {
14
- display: flex;
15
- flex-direction: column;
16
- gap: 0.75rem;
17
- min-width: 0;
12
+ .cho-detail-page__body {
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 0.75rem;
16
+ min-width: 0;
18
17
 
19
- &--none {
20
- padding: 0;
21
- }
18
+ &--none {
19
+ padding: 0;
20
+ }
22
21
 
23
- &--compact {
24
- padding: 0.75rem;
25
- }
22
+ &--compact {
23
+ padding: 0.75rem;
24
+ }
26
25
 
27
- &--comfortable {
28
- padding: 1rem;
29
- }
26
+ &--comfortable {
27
+ padding: 1rem;
30
28
  }
31
29
  }
package/styles/_forms.scss CHANGED
@@ -1,33 +1,31 @@
1
- @layer components {
2
- .cho-radio-group {
3
- border: 0;
4
- display: flex;
5
- flex-wrap: wrap;
6
- gap: 0.5rem 1rem;
7
- margin: 0;
8
- min-width: 0;
9
- padding: 0;
1
+ .cho-radio-group {
2
+ border: 0;
3
+ display: flex;
4
+ flex-wrap: wrap;
5
+ gap: 0.5rem 1rem;
6
+ margin: 0;
7
+ min-width: 0;
8
+ padding: 0;
10
9
 
11
- &__label {
12
- flex-basis: 100%;
13
- font-size: inherit;
14
- font-weight: 500;
15
- margin-block-end: 0.25rem;
16
- padding: 0;
17
- }
10
+ &__label {
11
+ flex-basis: 100%;
12
+ font-size: inherit;
13
+ font-weight: 500;
14
+ margin-block-end: 0.25rem;
15
+ padding: 0;
16
+ }
18
17
 
19
- &__option {
20
- align-items: center;
21
- cursor: pointer;
22
- display: inline-flex;
23
- gap: 0.375rem;
24
- }
18
+ &__option {
19
+ align-items: center;
20
+ cursor: pointer;
21
+ display: inline-flex;
22
+ gap: 0.375rem;
23
+ }
25
24
 
26
- &__input {
27
- accent-color: var(--p-primary-color, #211c72);
28
- height: 1rem;
29
- margin: 0;
30
- width: 1rem;
31
- }
25
+ &__input {
26
+ accent-color: var(--p-primary-color, #211c72);
27
+ height: 1rem;
28
+ margin: 0;
29
+ width: 1rem;
32
30
  }
33
31
  }
package/styles/_pager.scss CHANGED
@@ -1,45 +1,43 @@
1
1
  @use 'ngx-cho-common/styles/tokens' as cho;
2
2
 
3
- @layer components {
4
- .cho-pager {
5
- border-block-start: 1px solid var(--p-content-border-color, #e5e7eb);
6
- display: flex;
3
+ .cho-pager {
4
+ border-block-start: 1px solid var(--p-content-border-color, #e5e7eb);
5
+ display: flex;
6
+ justify-content: center;
7
+ padding: 0.5rem 0 0;
8
+ width: 100%;
9
+
10
+ .p-paginator {
11
+ background: transparent;
12
+ border: 0;
13
+ gap: 0.25rem;
7
14
  justify-content: center;
8
- padding: 0.5rem 0 0;
15
+ padding: 0.25rem 0;
9
16
  width: 100%;
17
+ }
10
18
 
11
- .p-paginator {
12
- background: transparent;
13
- border: 0;
14
- gap: 0.25rem;
15
- justify-content: center;
16
- padding: 0.25rem 0;
17
- width: 100%;
18
- }
19
-
20
- .p-paginator-current {
21
- color: var(--p-text-color, #374151);
22
- margin-inline-end: auto;
23
- min-width: 7rem;
24
- order: -1;
25
- text-align: start;
26
- }
19
+ .p-paginator-current {
20
+ color: var(--p-text-color, #374151);
21
+ margin-inline-end: auto;
22
+ min-width: 7rem;
23
+ order: -1;
24
+ text-align: start;
25
+ }
27
26
 
28
- .p-paginator-rpp-options {
29
- margin-inline-start: auto;
30
- min-width: 4.75rem;
31
- }
27
+ .p-paginator-rpp-options {
28
+ margin-inline-start: auto;
29
+ min-width: 4.75rem;
30
+ }
32
31
 
33
- :is(
34
- .p-paginator-page,
35
- .p-paginator-next,
36
- .p-paginator-prev,
37
- .p-paginator-first,
38
- .p-paginator-last
39
- ) {
40
- border-radius: cho.$cho-radius-sm;
41
- height: 2rem;
42
- min-width: 2rem;
43
- }
32
+ :is(
33
+ .p-paginator-page,
34
+ .p-paginator-next,
35
+ .p-paginator-prev,
36
+ .p-paginator-first,
37
+ .p-paginator-last
38
+ ) {
39
+ border-radius: cho.$cho-radius-sm;
40
+ height: 2rem;
41
+ min-width: 2rem;
44
42
  }
45
43
  }
package/styles/_responsive.scss CHANGED
@@ -1,26 +1,24 @@
1
- @layer components {
2
- @media (max-width: 767.98px) {
3
- .cho-card-header,
4
- .cho-card-toolbar,
5
- .cho-card-filters {
6
- align-items: stretch;
7
- flex-direction: column;
8
- }
1
+ @media (max-width: 767.98px) {
2
+ .cho-card-header,
3
+ .cho-card-toolbar,
4
+ .cho-card-filters {
5
+ align-items: stretch;
6
+ flex-direction: column;
7
+ }
9
8
 
10
- .cho-card-toolbar {
11
- width: 100%;
12
- }
9
+ .cho-card-toolbar {
10
+ width: 100%;
11
+ }
13
12
 
14
- .cho-pager {
15
- .p-paginator {
16
- justify-content: flex-start;
17
- }
13
+ .cho-pager {
14
+ .p-paginator {
15
+ justify-content: flex-start;
16
+ }
18
17
 
19
- .p-paginator-current,
20
- .p-paginator-rpp-options {
21
- margin-inline: 0;
22
- width: 100%;
23
- }
18
+ .p-paginator-current,
19
+ .p-paginator-rpp-options {
20
+ margin-inline: 0;
21
+ width: 100%;
24
22
  }
25
23
  }
26
24
  }
package/styles/_search-card.scss CHANGED
@@ -1,44 +1,42 @@
1
- @layer components {
2
- cho-search-card {
3
- display: block;
4
- min-width: 0;
1
+ cho-search-card {
2
+ display: block;
3
+ min-width: 0;
4
+ }
5
+
6
+ .cho-search-card__content {
7
+ min-width: 0;
8
+ width: 100%;
9
+
10
+ &--none {
11
+ padding: 0;
5
12
  }
6
13
 
7
- .cho-search-card__content {
8
- min-width: 0;
9
- width: 100%;
14
+ &--compact {
15
+ padding: 0.75rem;
16
+ }
10
17
 
11
- &--none {
12
- padding: 0;
13
- }
18
+ &--comfortable {
19
+ padding: 1rem;
20
+ }
21
+ }
14
22
 
15
- &--compact {
16
- padding: 0.75rem;
17
- }
23
+ cho-search-card .cho-card-filters {
24
+ > * {
25
+ flex: 1 1 14rem;
26
+ min-width: min(100%, 12rem);
27
+ }
18
28
 
19
- &--comfortable {
20
- padding: 1rem;
21
- }
29
+ > :is(input[pInputText], p-icon-field) {
30
+ flex: 2 1 22rem;
22
31
  }
23
32
 
24
- cho-search-card .cho-card-filters {
25
- > * {
26
- flex: 1 1 14rem;
27
- min-width: min(100%, 12rem);
28
- }
29
-
30
- > :is(input[pInputText], p-icon-field) {
31
- flex: 2 1 22rem;
32
- }
33
-
34
- > :is(button, p-button, p-checkbox) {
35
- flex: 0 0 auto;
36
- min-width: 0;
37
- }
38
-
39
- > p-icon-field input[pInputText],
40
- > p-select .p-select {
41
- width: 100%;
42
- }
33
+ > :is(button, p-button, p-checkbox) {
34
+ flex: 0 0 auto;
35
+ min-width: 0;
36
+ }
37
+
38
+ > p-icon-field input[pInputText],
39
+ > p-select .p-select {
40
+ width: 100%;
43
41
  }
44
42
  }
package/styles/_status.scss CHANGED
@@ -1,9 +1,7 @@
1
- @layer components {
2
- .cho-review-status {
3
- background: var(--p-message-info-background, var(--p-primary-50, #f0effb));
4
- border: 1px solid var(--p-message-info-border-color, var(--p-primary-200, #d9d6f2));
5
- border-radius: var(--cho-control-radius, 6px);
6
- color: var(--p-message-info-color, var(--p-primary-color, #211c72));
7
- padding: 0.75rem 1rem;
8
- }
1
+ .cho-review-status {
2
+ background: var(--p-message-info-background, var(--p-primary-50, #f0effb));
3
+ border: 1px solid var(--p-message-info-border-color, var(--p-primary-200, #d9d6f2));
4
+ border-radius: var(--cho-control-radius, 6px);
5
+ color: var(--p-message-info-color, var(--p-primary-color, #211c72));
6
+ padding: 0.75rem 1rem;
9
7
  }