ngx-cho-components 2.0.0 → 4.0.0
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/README.md +34 -96
- package/fesm2022/ngx-cho-components.mjs +723 -256
- package/fesm2022/ngx-cho-components.mjs.map +1 -1
- package/lib/cho-address-info.component.d.ts +2 -2
- package/lib/cho-card-header.component.d.ts +4 -2
- package/lib/cho-card-tabs.component.d.ts +1 -1
- package/lib/cho-card.component.d.ts +14 -16
- package/lib/cho-component.types.d.ts +2 -0
- package/lib/cho-detail-page.component.d.ts +26 -0
- package/lib/cho-details-card.component.d.ts +4 -4
- package/lib/cho-email-info.component.d.ts +2 -6
- package/lib/cho-pager.component.d.ts +23 -0
- package/lib/cho-phone-info.component.d.ts +2 -2
- package/lib/cho-radio-group.component.d.ts +13 -12
- package/lib/cho-review-status-alert.component.d.ts +3 -3
- package/lib/cho-search-card.component.d.ts +41 -0
- package/lib/index.d.ts +5 -5
- package/package.json +13 -6
- package/styles/_cards.scss +116 -0
- package/styles/_contact-info.scss +9 -0
- package/styles/_detail-page.scss +31 -0
- package/styles/_forms.scss +33 -0
- package/styles/_index.scss +8 -0
- package/styles/_pager.scss +45 -0
- package/styles/_responsive.scss +26 -0
- package/styles/_search-card.scss +44 -0
- package/styles/_status.scss +9 -0
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
@use 'ngx-cho-common/styles/mixins' as cho;
|
|
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;
|
|
19
|
+
|
|
20
|
+
&--none {
|
|
21
|
+
padding: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&--compact {
|
|
25
|
+
padding: 0.75rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&--comfortable {
|
|
29
|
+
padding: var(--cho-card-body-padding, 1rem);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__tabs {
|
|
34
|
+
border-block-end: 1px solid var(--surface-border);
|
|
35
|
+
padding: 0.75rem 1rem;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cho-card-header {
|
|
40
|
+
align-items: center;
|
|
41
|
+
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
|
+
}
|
|
52
|
+
|
|
53
|
+
h1#{&}__title {
|
|
54
|
+
font-size: 1.5rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
h2#{&}__title {
|
|
58
|
+
font-size: 1.375rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
h4#{&}__title {
|
|
62
|
+
font-size: 1.125rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
h5#{&}__title,
|
|
66
|
+
h6#{&}__title {
|
|
67
|
+
font-size: 1rem;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
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;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.cho-card-filters {
|
|
81
|
+
align-items: end;
|
|
82
|
+
border-block-end: 1px solid var(--surface-border);
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-wrap: wrap;
|
|
85
|
+
gap: 0.75rem;
|
|
86
|
+
padding: var(--cho-card-filters-padding, 0.75rem 1rem);
|
|
87
|
+
}
|
|
88
|
+
|
|
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
|
+
|
|
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
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
cho-detail-page {
|
|
3
|
+
display: grid;
|
|
4
|
+
gap: 0.75rem;
|
|
5
|
+
min-width: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
cho-detail-page > cho-card > .cho-card {
|
|
9
|
+
margin-block-end: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cho-detail-page__body {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 0.75rem;
|
|
17
|
+
min-width: 0;
|
|
18
|
+
|
|
19
|
+
&--none {
|
|
20
|
+
padding: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&--compact {
|
|
24
|
+
padding: 0.75rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&--comfortable {
|
|
28
|
+
padding: 1rem;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
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;
|
|
10
|
+
|
|
11
|
+
&__label {
|
|
12
|
+
flex-basis: 100%;
|
|
13
|
+
font-size: inherit;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
margin-block-end: 0.25rem;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__option {
|
|
20
|
+
align-items: center;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
gap: 0.375rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&__input {
|
|
27
|
+
accent-color: var(--p-primary-color, #211c72);
|
|
28
|
+
height: 1rem;
|
|
29
|
+
margin: 0;
|
|
30
|
+
width: 1rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@use 'ngx-cho-common/styles/tokens' as cho;
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
.cho-pager {
|
|
5
|
+
border-block-start: 1px solid var(--p-content-border-color, #e5e7eb);
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
padding: 0.5rem 0 0;
|
|
9
|
+
width: 100%;
|
|
10
|
+
|
|
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
|
+
}
|
|
27
|
+
|
|
28
|
+
.p-paginator-rpp-options {
|
|
29
|
+
margin-inline-start: auto;
|
|
30
|
+
min-width: 4.75rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
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
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
+
}
|
|
9
|
+
|
|
10
|
+
.cho-card-toolbar {
|
|
11
|
+
width: 100%;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.cho-pager {
|
|
15
|
+
.p-paginator {
|
|
16
|
+
justify-content: flex-start;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.p-paginator-current,
|
|
20
|
+
.p-paginator-rpp-options {
|
|
21
|
+
margin-inline: 0;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
cho-search-card {
|
|
3
|
+
display: block;
|
|
4
|
+
min-width: 0;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.cho-search-card__content {
|
|
8
|
+
min-width: 0;
|
|
9
|
+
width: 100%;
|
|
10
|
+
|
|
11
|
+
&--none {
|
|
12
|
+
padding: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&--compact {
|
|
16
|
+
padding: 0.75rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&--comfortable {
|
|
20
|
+
padding: 1rem;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
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
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
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
|
+
}
|
|
9
|
+
}
|