monkey-style-guide-v2 0.0.4 → 0.0.6
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/assets/scss/directives/_index.scss +7 -0
- package/assets/scss/directives/_styles.scss +100 -0
- package/assets/scss/input/_index.scss +7 -0
- package/assets/scss/input/_styles.scss +43 -0
- package/assets/scss/partials/_index.scss +7 -0
- package/assets/scss/partials/_style-reset.scss +189 -0
- package/assets/scss/partials/_variables.scss +178 -0
- package/assets/scss/table/_index.scss +7 -0
- package/assets/scss/table/_styles.scss +45 -0
- package/assets/scss/theme.scss +11 -0
- package/assets/scss/typography/_function.scss +23 -0
- package/assets/scss/typography/_index.scss +9 -0
- package/assets/scss/typography/_mixins.scss +111 -0
- package/assets/scss/typography/_styles.scss +173 -0
- package/esm2022/lib/components/index.mjs +14 -1
- package/esm2022/lib/components/monkey-accordion/index.mjs +2 -0
- package/esm2022/lib/components/monkey-accordion/monkey-accordion.component.mjs +102 -0
- package/esm2022/lib/components/monkey-alert/index.mjs +2 -0
- package/esm2022/lib/components/monkey-alert/monkey-alert.component.mjs +50 -0
- package/esm2022/lib/components/monkey-breadcrumb/index.mjs +2 -0
- package/esm2022/lib/components/monkey-breadcrumb/monkey-breadcrumb.component.mjs +56 -0
- package/esm2022/lib/components/monkey-button/monkey-button.component.mjs +27 -12
- package/esm2022/lib/components/monkey-checkbox/index.mjs +2 -0
- package/esm2022/lib/components/monkey-checkbox/monkey-checkbox.component.mjs +216 -0
- package/esm2022/lib/components/monkey-divider/index.mjs +2 -0
- package/esm2022/lib/components/monkey-divider/monkey-divider.component.mjs +44 -0
- package/esm2022/lib/components/monkey-form-field/form-field-control.mjs +15 -0
- package/esm2022/lib/components/monkey-form-field/form-field.mjs +250 -0
- package/esm2022/lib/components/monkey-form-field/index.mjs +5 -0
- package/esm2022/lib/components/monkey-form-field/module.mjs +21 -0
- package/esm2022/lib/components/monkey-form-field/utils.mjs +16 -0
- package/esm2022/lib/components/monkey-icon/monkey-icon.component.mjs +31 -15
- package/esm2022/lib/components/monkey-icon-button/monkey-icon-button.component.mjs +25 -9
- package/esm2022/lib/components/monkey-input/index.mjs +5 -0
- package/esm2022/lib/components/monkey-input/monkey-input-currency.directive.mjs +187 -0
- package/esm2022/lib/components/monkey-input/monkey-input.directive.mjs +166 -0
- package/esm2022/lib/components/monkey-input/monkey-input.module.mjs +24 -0
- package/esm2022/lib/components/monkey-input/validators.mjs +17 -0
- package/esm2022/lib/components/monkey-option/index.mjs +2 -0
- package/esm2022/lib/components/monkey-option/monkey-option.component.mjs +54 -0
- package/esm2022/lib/components/monkey-security-level/monkey-security-level.component.mjs +30 -14
- package/esm2022/lib/components/monkey-select/index.mjs +2 -0
- package/esm2022/lib/components/monkey-select/monkey-select.component.mjs +352 -0
- package/esm2022/lib/components/monkey-status/monkey-status.component.mjs +28 -12
- package/esm2022/lib/components/monkey-table/components/pagination-action/pagination-action.mjs +53 -0
- package/esm2022/lib/components/monkey-table/components/pagination-label/pagination-label.mjs +34 -0
- package/esm2022/lib/components/monkey-table/components/pagination-size/pagination-size.mjs +57 -0
- package/esm2022/lib/components/monkey-table/directives/column-checked.mjs +109 -0
- package/esm2022/lib/components/monkey-table/directives/column-expansible.mjs +134 -0
- package/esm2022/lib/components/monkey-table/directives/column-sortable.mjs +97 -0
- package/esm2022/lib/components/monkey-table/directives/column-stick.mjs +28 -0
- package/esm2022/lib/components/monkey-table/index.mjs +10 -0
- package/esm2022/lib/components/monkey-table/table.mjs +132 -0
- package/esm2022/lib/components/monkey-table/table.module.mjs +60 -0
- package/esm2022/lib/components/monkey-toast/index.mjs +2 -0
- package/esm2022/lib/components/monkey-toast/monkey-toast.component.mjs +74 -0
- package/esm2022/lib/components/monkey-toggle/monkey-toggle.component.mjs +28 -14
- package/esm2022/lib/components/monkey-toggle-line/index.mjs +3 -0
- package/esm2022/lib/components/monkey-toggle-line/monkey-toggle-line-button/index.mjs +2 -0
- package/esm2022/lib/components/monkey-toggle-line/monkey-toggle-line-button/monkey-toggle-line-button.component.mjs +24 -0
- package/esm2022/lib/components/monkey-toggle-line/monkey-toggle-line.component.mjs +85 -0
- package/esm2022/lib/components/monkey-tooltip/index.mjs +3 -0
- package/esm2022/lib/components/monkey-tooltip/monkey-tooltip.directive.mjs +175 -0
- package/esm2022/lib/components/monkey-tooltip/tooltip/index.mjs +2 -0
- package/esm2022/lib/components/monkey-tooltip/tooltip/tooltip.component.mjs +53 -0
- package/esm2022/lib/directives/error.mjs +18 -0
- package/esm2022/lib/directives/helper.mjs +18 -0
- package/esm2022/lib/directives/index.mjs +8 -0
- package/esm2022/lib/directives/info.mjs +18 -0
- package/esm2022/lib/directives/label.mjs +18 -0
- package/esm2022/lib/directives/module.mjs +26 -0
- package/esm2022/lib/directives/prefix.mjs +18 -0
- package/esm2022/lib/directives/suffix.mjs +43 -0
- package/esm2022/lib/interfaces/alert.mjs +2 -0
- package/esm2022/lib/interfaces/breadcrumb.mjs +2 -0
- package/esm2022/lib/interfaces/button.mjs +2 -0
- package/esm2022/lib/interfaces/index.mjs +7 -0
- package/esm2022/lib/interfaces/sizes.mjs +2 -0
- package/esm2022/lib/interfaces/table.mjs +2 -0
- package/esm2022/lib/interfaces/toast.mjs +10 -0
- package/esm2022/lib/services/index.mjs +4 -0
- package/esm2022/lib/services/monkey-destroy.service.mjs +15 -0
- package/esm2022/lib/services/monkey-icons.service.mjs +45 -0
- package/esm2022/lib/services/monkey-toast.service.mjs +72 -0
- package/esm2022/public-api.mjs +6 -3
- package/esm2022/utils/id-generator.mjs +20 -0
- package/esm2022/utils/index.mjs +4 -0
- package/esm2022/utils/tests-utils.mjs +4 -0
- package/esm2022/utils/utils.mjs +10 -0
- package/fesm2022/monkey-style-guide-v2.mjs +3049 -121
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/lib/components/index.d.ts +13 -0
- package/lib/components/monkey-accordion/index.d.ts +1 -0
- package/lib/components/monkey-accordion/monkey-accordion.component.d.ts +22 -0
- package/lib/components/monkey-alert/index.d.ts +1 -0
- package/lib/components/monkey-alert/monkey-alert.component.d.ts +23 -0
- package/lib/components/monkey-breadcrumb/index.d.ts +1 -0
- package/lib/components/monkey-breadcrumb/monkey-breadcrumb.component.d.ts +18 -0
- package/lib/components/monkey-button/monkey-button.component.d.ts +11 -4
- package/lib/components/monkey-checkbox/index.d.ts +1 -0
- package/lib/components/monkey-checkbox/monkey-checkbox.component.d.ts +50 -0
- package/lib/components/monkey-divider/index.d.ts +1 -0
- package/lib/components/monkey-divider/monkey-divider.component.d.ts +20 -0
- package/lib/components/monkey-form-field/form-field-control.d.ts +18 -0
- package/lib/components/monkey-form-field/form-field.d.ts +74 -0
- package/lib/components/monkey-form-field/index.d.ts +4 -0
- package/lib/components/monkey-form-field/module.d.ts +7 -0
- package/lib/components/monkey-form-field/utils.d.ts +6 -0
- package/lib/components/monkey-icon/monkey-icon.component.d.ts +6 -1
- package/lib/components/monkey-icon-button/monkey-icon-button.component.d.ts +6 -1
- package/lib/components/monkey-input/index.d.ts +4 -0
- package/lib/components/monkey-input/monkey-input-currency.directive.d.ts +57 -0
- package/lib/components/monkey-input/monkey-input.directive.d.ts +46 -0
- package/lib/components/monkey-input/monkey-input.module.d.ts +8 -0
- package/lib/components/monkey-input/validators.d.ts +1 -0
- package/lib/components/monkey-option/index.d.ts +1 -0
- package/lib/components/monkey-option/monkey-option.component.d.ts +22 -0
- package/lib/components/monkey-security-level/monkey-security-level.component.d.ts +7 -2
- package/lib/components/monkey-select/index.d.ts +1 -0
- package/lib/components/monkey-select/monkey-select.component.d.ts +74 -0
- package/lib/components/monkey-status/monkey-status.component.d.ts +8 -3
- package/lib/components/monkey-table/components/pagination-action/pagination-action.d.ts +17 -0
- package/lib/components/monkey-table/components/pagination-label/pagination-label.d.ts +10 -0
- package/lib/components/monkey-table/components/pagination-size/pagination-size.d.ts +15 -0
- package/lib/components/monkey-table/directives/column-checked.d.ts +32 -0
- package/lib/components/monkey-table/directives/column-expansible.d.ts +25 -0
- package/lib/components/monkey-table/directives/column-sortable.d.ts +24 -0
- package/lib/components/monkey-table/directives/column-stick.d.ts +6 -0
- package/lib/components/monkey-table/index.d.ts +9 -0
- package/lib/components/monkey-table/table.d.ts +32 -0
- package/lib/components/monkey-table/table.module.d.ts +15 -0
- package/lib/components/monkey-toast/index.d.ts +1 -0
- package/lib/components/monkey-toast/monkey-toast.component.d.ts +26 -0
- package/lib/components/monkey-toggle/monkey-toggle.component.d.ts +6 -1
- package/lib/components/monkey-toggle-line/index.d.ts +2 -0
- package/lib/components/monkey-toggle-line/monkey-toggle-line-button/index.d.ts +1 -0
- package/lib/components/monkey-toggle-line/monkey-toggle-line-button/monkey-toggle-line-button.component.d.ts +16 -0
- package/lib/components/monkey-toggle-line/monkey-toggle-line.component.d.ts +24 -0
- package/lib/components/monkey-tooltip/index.d.ts +2 -0
- package/lib/components/monkey-tooltip/monkey-tooltip.directive.d.ts +30 -0
- package/lib/components/monkey-tooltip/tooltip/index.d.ts +1 -0
- package/lib/components/monkey-tooltip/tooltip/tooltip.component.d.ts +19 -0
- package/lib/directives/error.d.ts +5 -0
- package/lib/directives/helper.d.ts +5 -0
- package/lib/directives/index.d.ts +7 -0
- package/lib/directives/info.d.ts +5 -0
- package/lib/directives/label.d.ts +5 -0
- package/lib/directives/module.d.ts +12 -0
- package/lib/directives/prefix.d.ts +5 -0
- package/lib/directives/suffix.d.ts +9 -0
- package/lib/interfaces/alert.d.ts +1 -0
- package/lib/interfaces/breadcrumb.d.ts +5 -0
- package/lib/interfaces/button.d.ts +1 -0
- package/lib/interfaces/index.d.ts +6 -0
- package/lib/interfaces/sizes.d.ts +1 -0
- package/lib/interfaces/table.d.ts +4 -0
- package/lib/interfaces/toast.d.ts +22 -0
- package/lib/services/index.d.ts +3 -0
- package/lib/services/monkey-destroy.service.d.ts +8 -0
- package/lib/services/monkey-icons.service.d.ts +14 -0
- package/lib/services/monkey-toast.service.d.ts +13 -0
- package/monkey-style-guide-v2-0.0.6.tgz +0 -0
- package/package.json +10 -3
- package/public-api.d.ts +5 -2
- package/utils/id-generator.d.ts +6 -0
- package/utils/index.d.ts +3 -0
- package/utils/tests-utils.d.ts +1 -0
- package/utils/utils.d.ts +1 -0
- package/monkey-style-guide-v2-0.0.4.tgz +0 -0
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/** ************************
|
|
2
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4
|
+
* MIT Licence
|
|
5
|
+
************************* */
|
|
6
|
+
|
|
7
|
+
@import '../partials/variables';
|
|
8
|
+
@import 'function';
|
|
9
|
+
|
|
10
|
+
@mixin mecx-font($props: ()) {
|
|
11
|
+
$default-props: (
|
|
12
|
+
size: f-size(base),
|
|
13
|
+
weight: f-weight(regular),
|
|
14
|
+
line-height: f-lh(base),
|
|
15
|
+
color: #000
|
|
16
|
+
);
|
|
17
|
+
$properties: (
|
|
18
|
+
size: font-size,
|
|
19
|
+
weight: font-weight,
|
|
20
|
+
line-height: line-height,
|
|
21
|
+
color: color
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
@each $key, $property in $properties {
|
|
25
|
+
$value: if(map-has-key($props, $key), map-get($props, $key), map-get($default-props, $key));
|
|
26
|
+
|
|
27
|
+
@if $value != null {
|
|
28
|
+
#{$property}: #{$value};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin sizes() {
|
|
34
|
+
@each $key, $value in $mecx-gray {
|
|
35
|
+
&-#{$key} {
|
|
36
|
+
font-size: $value !important;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin weight() {
|
|
42
|
+
@each $key, $value in $mecx-weight {
|
|
43
|
+
&-weight-#{$key} {
|
|
44
|
+
font-weight: $value !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@mixin line-height() {
|
|
50
|
+
@each $key, $value in $mecx-lh {
|
|
51
|
+
&-lh-#{$key} {
|
|
52
|
+
line-height: $value !important;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin align() {
|
|
58
|
+
@each $key, $value in $mecx-align {
|
|
59
|
+
&-a-#{$key} {
|
|
60
|
+
text-align: $value !important;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin gray-cl($attribute: 'color') {
|
|
66
|
+
@each $key, $value in $mecx-gray {
|
|
67
|
+
&-cl-gray-#{$key} {
|
|
68
|
+
#{$attribute}: $value !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@mixin theme-cl($attribute: 'color') {
|
|
74
|
+
@each $key, $value in $mecx-theme {
|
|
75
|
+
@if type-of($value) != 'map' {
|
|
76
|
+
&-cl-theme-#{$key} {
|
|
77
|
+
#{$attribute}: $value !important;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@mixin warning-cl($attribute: 'color') {
|
|
84
|
+
@each $key, $value in $mecx-warning {
|
|
85
|
+
@if type-of($value) != 'map' {
|
|
86
|
+
&-cl-warning-#{$key} {
|
|
87
|
+
#{$attribute}: $value !important;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin success-cl($attribute: 'color') {
|
|
94
|
+
@each $key, $value in $mecx-success {
|
|
95
|
+
@if type-of($value) != 'map' {
|
|
96
|
+
&-cl-success-#{$key} {
|
|
97
|
+
#{$attribute}: $value !important;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@mixin error-cl($attribute: 'color') {
|
|
104
|
+
@each $key, $value in $mecx-error {
|
|
105
|
+
@if type-of($value) != 'map' {
|
|
106
|
+
&-cl-error-#{$key} {
|
|
107
|
+
#{$attribute}: $value !important;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/** ************************
|
|
2
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4
|
+
* MIT Licence
|
|
5
|
+
************************* */
|
|
6
|
+
|
|
7
|
+
@import 'mixins';
|
|
8
|
+
@import '../partials/variables';
|
|
9
|
+
@import 'function';
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
background-color: #fff;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
h1 {
|
|
18
|
+
@include mecx-font(
|
|
19
|
+
(
|
|
20
|
+
size: f-size(xxl)
|
|
21
|
+
)
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h2 {
|
|
26
|
+
@include mecx-font(
|
|
27
|
+
(
|
|
28
|
+
size: f-size(xl)
|
|
29
|
+
)
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h3 {
|
|
34
|
+
@include mecx-font(
|
|
35
|
+
(
|
|
36
|
+
size: f-size(lg)
|
|
37
|
+
)
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
h4 {
|
|
42
|
+
@include mecx-font(
|
|
43
|
+
(
|
|
44
|
+
size: f-size(md)
|
|
45
|
+
)
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h5 {
|
|
50
|
+
@include mecx-font(
|
|
51
|
+
(
|
|
52
|
+
size: f-size(sm)
|
|
53
|
+
)
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
h6 {
|
|
58
|
+
@include mecx-font;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
p {
|
|
62
|
+
@include mecx-font;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
a {
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
|
|
69
|
+
@include mecx-font(
|
|
70
|
+
(
|
|
71
|
+
color: #0066cc
|
|
72
|
+
)
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
text-decoration: underline;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.bg {
|
|
81
|
+
@include gray-cl('background-color');
|
|
82
|
+
@include theme-cl('background-color');
|
|
83
|
+
@include warning-cl('background-color');
|
|
84
|
+
@include success-cl('background-color');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.txt {
|
|
88
|
+
@include gray-cl;
|
|
89
|
+
@include theme-cl;
|
|
90
|
+
@include warning-cl;
|
|
91
|
+
@include success-cl;
|
|
92
|
+
@include error-cl;
|
|
93
|
+
@include align;
|
|
94
|
+
@include sizes;
|
|
95
|
+
@include weight;
|
|
96
|
+
@include line-height;
|
|
97
|
+
|
|
98
|
+
&-none {
|
|
99
|
+
text-decoration: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&-underline {
|
|
103
|
+
text-decoration: underline;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&-upper {
|
|
107
|
+
text-transform: uppercase;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&-lower {
|
|
111
|
+
text-transform: lowercase;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&-capitalize {
|
|
115
|
+
text-transform: capitalize;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&-shadow {
|
|
119
|
+
text-shadow: 2px 2px 4px;
|
|
120
|
+
color: f-cl-gray(700);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.mecx-title-page {
|
|
125
|
+
@include mecx-font(
|
|
126
|
+
(
|
|
127
|
+
size: f-size(xl),
|
|
128
|
+
weight: f-weight(bold),
|
|
129
|
+
height: f-lh(super)
|
|
130
|
+
)
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.mecx-description {
|
|
135
|
+
@include mecx-font(
|
|
136
|
+
(
|
|
137
|
+
size: f-size(xs),
|
|
138
|
+
weight: f-weight(regular),
|
|
139
|
+
height: f-lh(md)
|
|
140
|
+
)
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.mecx-title {
|
|
145
|
+
@include mecx-font(
|
|
146
|
+
(
|
|
147
|
+
size: f-size(xxs),
|
|
148
|
+
weight: f-weight(regular),
|
|
149
|
+
height: f-lh(md),
|
|
150
|
+
color: f-cl-gray(700)
|
|
151
|
+
)
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.mecx-value {
|
|
156
|
+
@include mecx-font(
|
|
157
|
+
(
|
|
158
|
+
size: f-size(xxs),
|
|
159
|
+
weight: f-weight(regular),
|
|
160
|
+
height: f-lh(md)
|
|
161
|
+
)
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.mecx-label {
|
|
166
|
+
@include mecx-font(
|
|
167
|
+
(
|
|
168
|
+
size: f-size(xxs),
|
|
169
|
+
weight: f-weight(regular),
|
|
170
|
+
height: f-lh(md)
|
|
171
|
+
)
|
|
172
|
+
);
|
|
173
|
+
}
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
export * from './monkey-accordion';
|
|
2
|
+
export * from './monkey-alert';
|
|
3
|
+
export * from './monkey-breadcrumb';
|
|
1
4
|
export * from './monkey-button';
|
|
5
|
+
export * from './monkey-checkbox';
|
|
6
|
+
export * from './monkey-divider';
|
|
7
|
+
export * from './monkey-form-field';
|
|
2
8
|
export * from './monkey-icon';
|
|
3
9
|
export * from './monkey-icon-button';
|
|
10
|
+
export * from './monkey-input';
|
|
4
11
|
export * from './monkey-security-level';
|
|
5
12
|
export * from './monkey-status';
|
|
13
|
+
export * from './monkey-table';
|
|
14
|
+
export * from './monkey-toast';
|
|
6
15
|
export * from './monkey-toggle';
|
|
7
|
-
|
|
16
|
+
export * from './monkey-toggle-line';
|
|
17
|
+
export * from './monkey-tooltip';
|
|
18
|
+
export * from './monkey-select';
|
|
19
|
+
export * from './monkey-option';
|
|
20
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGtCQUFrQixDQUFDO0FBQ2pDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGlCQUFpQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9tb25rZXktYWNjb3JkaW9uJztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWFsZXJ0JztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWJyZWFkY3J1bWInO1xuZXhwb3J0ICogZnJvbSAnLi9tb25rZXktYnV0dG9uJztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWNoZWNrYm94JztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWRpdmlkZXInO1xuZXhwb3J0ICogZnJvbSAnLi9tb25rZXktZm9ybS1maWVsZCc7XG5leHBvcnQgKiBmcm9tICcuL21vbmtleS1pY29uJztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWljb24tYnV0dG9uJztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWlucHV0JztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LXNlY3VyaXR5LWxldmVsJztcbmV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LXN0YXR1cyc7XG5leHBvcnQgKiBmcm9tICcuL21vbmtleS10YWJsZSc7XG5leHBvcnQgKiBmcm9tICcuL21vbmtleS10b2FzdCc7XG5leHBvcnQgKiBmcm9tICcuL21vbmtleS10b2dnbGUnO1xuZXhwb3J0ICogZnJvbSAnLi9tb25rZXktdG9nZ2xlLWxpbmUnO1xuZXhwb3J0ICogZnJvbSAnLi9tb25rZXktdG9vbHRpcCc7XG5leHBvcnQgKiBmcm9tICcuL21vbmtleS1zZWxlY3QnO1xuZXhwb3J0ICogZnJvbSAnLi9tb25rZXktb3B0aW9uJztcbiJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './monkey-accordion.component';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1hY2NvcmRpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw4QkFBOEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbW9ua2V5LWFjY29yZGlvbi5jb21wb25lbnQnO1xuIl19
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/** ************************
|
|
2
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4
|
+
* MIT Licence
|
|
5
|
+
************************* */
|
|
6
|
+
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
7
|
+
import { CommonModule } from '@angular/common';
|
|
8
|
+
import { booleanAttribute, Component, inject, Input, TemplateRef } from '@angular/core';
|
|
9
|
+
import { IdGenerator } from '../../../utils';
|
|
10
|
+
import { MonkeyIconsService } from '../../services';
|
|
11
|
+
import * as i0 from "@angular/core";
|
|
12
|
+
import * as i1 from "@angular/common";
|
|
13
|
+
export class MonkeyAccordionComponent {
|
|
14
|
+
set title(data) {
|
|
15
|
+
if (data instanceof TemplateRef) {
|
|
16
|
+
this.titleRef = data;
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
this.titleStr = data;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
get id() {
|
|
23
|
+
return this._id;
|
|
24
|
+
}
|
|
25
|
+
set id(value) {
|
|
26
|
+
this._id = value || this._uid;
|
|
27
|
+
}
|
|
28
|
+
constructor() {
|
|
29
|
+
this._icons = inject(MonkeyIconsService);
|
|
30
|
+
this.open = false;
|
|
31
|
+
this.disabled = false;
|
|
32
|
+
this.imgArrowDown = this._icons.arrowDown;
|
|
33
|
+
this._uid = inject(IdGenerator).getId('monkey-accordion-');
|
|
34
|
+
// eslint-disable-next-line no-self-assign
|
|
35
|
+
this.id = this.id;
|
|
36
|
+
}
|
|
37
|
+
onClick() {
|
|
38
|
+
if (this.disabled)
|
|
39
|
+
return;
|
|
40
|
+
this.open = !this.open;
|
|
41
|
+
}
|
|
42
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n <div class=\"title\">\n @if (titleRef) {\n <ng-container *ngTemplateOutlet=\"titleRef\" />\n } @else {\n {{ titleStr }}\n }\n </div>\n <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n @if (open) {\n <div [@content]>\n <div class=\"content\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
44
|
+
trigger('content', [
|
|
45
|
+
state('void', style({
|
|
46
|
+
height: '0px',
|
|
47
|
+
overflow: 'hidden'
|
|
48
|
+
})),
|
|
49
|
+
transition(':enter', [
|
|
50
|
+
animate('300ms ease-in-out', style({
|
|
51
|
+
height: '*',
|
|
52
|
+
overflow: 'hidden'
|
|
53
|
+
}))
|
|
54
|
+
]),
|
|
55
|
+
transition(':leave', [
|
|
56
|
+
animate('300ms ease-in-out', style({
|
|
57
|
+
height: '0px',
|
|
58
|
+
overflow: 'hidden'
|
|
59
|
+
}))
|
|
60
|
+
])
|
|
61
|
+
])
|
|
62
|
+
] }); }
|
|
63
|
+
}
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
|
|
65
|
+
type: Component,
|
|
66
|
+
args: [{ selector: 'monkey-accordion', standalone: true, imports: [CommonModule], host: {
|
|
67
|
+
'data-testid': 'monkey-accordion',
|
|
68
|
+
'[class.disabled]': 'disabled',
|
|
69
|
+
'[attr.id]': 'id',
|
|
70
|
+
'[id]': 'id'
|
|
71
|
+
}, animations: [
|
|
72
|
+
trigger('content', [
|
|
73
|
+
state('void', style({
|
|
74
|
+
height: '0px',
|
|
75
|
+
overflow: 'hidden'
|
|
76
|
+
})),
|
|
77
|
+
transition(':enter', [
|
|
78
|
+
animate('300ms ease-in-out', style({
|
|
79
|
+
height: '*',
|
|
80
|
+
overflow: 'hidden'
|
|
81
|
+
}))
|
|
82
|
+
]),
|
|
83
|
+
transition(':leave', [
|
|
84
|
+
animate('300ms ease-in-out', style({
|
|
85
|
+
height: '0px',
|
|
86
|
+
overflow: 'hidden'
|
|
87
|
+
}))
|
|
88
|
+
])
|
|
89
|
+
])
|
|
90
|
+
], template: "<div class=\"header\" (click)=\"onClick()\">\n <div class=\"title\">\n @if (titleRef) {\n <ng-container *ngTemplateOutlet=\"titleRef\" />\n } @else {\n {{ titleStr }}\n }\n </div>\n <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n @if (open) {\n <div [@content]>\n <div class=\"content\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"] }]
|
|
91
|
+
}], ctorParameters: () => [], propDecorators: { open: [{
|
|
92
|
+
type: Input,
|
|
93
|
+
args: [{ transform: booleanAttribute }]
|
|
94
|
+
}], disabled: [{
|
|
95
|
+
type: Input,
|
|
96
|
+
args: [{ transform: booleanAttribute }]
|
|
97
|
+
}], title: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}], id: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}] } });
|
|
102
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ua2V5LWFjY29yZGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1hY2NvcmRpb24vbW9ua2V5LWFjY29yZGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1hY2NvcmRpb24vbW9ua2V5LWFjY29yZGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs2QkFJNkI7QUFDN0IsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV4RixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQTRDcEQsTUFBTSxPQUFPLHdCQUF3QjtJQU9uQyxJQUFhLEtBQUssQ0FBQyxJQUErQjtRQUNoRCxJQUFJLElBQUksWUFBWSxXQUFXLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUN2QixDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDO0lBWUQsSUFDSSxFQUFFO1FBQ0osT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDO0lB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dCBNb25rZXkgRXhjaGFuZ2UuIEFsbCBSaWdodHMgUmVzZXJ2ZWRcbiAqIFRoaXMgc3R5bGUgZ3VpZGUgd2FzIGRldmVsb3BlZCBieSBNb25rZXkgRXhjaGFuZ2UgVGVhbVxuICogTUlUIExpY2VuY2VcbiAqKioqKioqKioqKioqKioqKioqKioqKioqICovXG5pbXBvcnQgeyBhbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBib29sZWFuQXR0cmlidXRlLCBDb21wb25lbnQsIGluamVjdCwgSW5wdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTYWZlSHRtbCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgSWRHZW5lcmF0b3IgfSBmcm9tICcuLi8uLi8uLi91dGlscyc7XG5pbXBvcnQgeyBNb25rZXlJY29uc1NlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21vbmtleS1hY2NvcmRpb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL21vbmtleS1hY2NvcmRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vbW9ua2V5LWFjY29yZGlvbi5jb21wb25lbnQuc2NzcycsXG4gIGhvc3Q6IHtcbiAgICAnZGF0YS10ZXN0aWQnOiAnbW9ua2V5LWFjY29yZGlvbicsXG4gICAgJ1tjbGFzcy5kaXNhYmxlZF0nOiAnZGlzYWJsZWQnLFxuICAgICdbYXR0ci5pZF0nOiAnaWQnLFxuICAgICdbaWRdJzogJ2lkJ1xuICB9LFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignY29udGVudCcsIFtcbiAgICAgIHN0YXRlKFxuICAgICAgICAndm9pZCcsXG4gICAgICAgIHN0eWxlKHtcbiAgICAgICAgICBoZWlnaHQ6ICcwcHgnLFxuICAgICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJ1xuICAgICAgICB9KVxuICAgICAgKSxcbiAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFtcbiAgICAgICAgYW5pbWF0ZShcbiAgICAgICAgICAnMzAwbXMgZWFzZS1pbi1vdXQnLFxuICAgICAgICAgIHN0eWxlKHtcbiAgICAgICAgICAgIGhlaWdodDogJyonLFxuICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nXG4gICAgICAgICAgfSlcbiAgICAgICAgKVxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKCc6bGVhdmUnLCBbXG4gICAgICAgIGFuaW1hdGUoXG4gICAgICAgICAgJzMwMG1zIGVhc2UtaW4tb3V0JyxcbiAgICAgICAgICBzdHlsZSh7XG4gICAgICAgICAgICBoZWlnaHQ6ICcwcHgnLFxuICAgICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nXG4gICAgICAgICAgfSlcbiAgICAgICAgKVxuICAgICAgXSlcbiAgICBdKVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE1vbmtleUFjY29yZGlvbkNvbXBvbmVudCB7XG4gIHByaXZhdGUgcmVhZG9ubHkgX2ljb25zID0gaW5qZWN0KE1vbmtleUljb25zU2VydmljZSk7XG5cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIG9wZW4gPSBmYWxzZTtcblxuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBzZXQgdGl0bGUoZGF0YTogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55Pikge1xuICAgIGlmIChkYXRhIGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpIHtcbiAgICAgIHRoaXMudGl0bGVSZWYgPSBkYXRhO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRpdGxlU3RyID0gZGF0YTtcbiAgICB9XG4gIH1cblxuICB0aXRsZVN0cjogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIHRpdGxlUmVmOiBUZW1wbGF0ZVJlZjxhbnk+IHwgdW5kZWZpbmVkO1xuXG4gIGltZ0Fycm93RG93bjogU2FmZUh0bWwgfCBudWxsID0gdGhpcy5faWNvbnMuYXJyb3dEb3duO1xuXG4gIHByb3RlY3RlZCBfdWlkID0gaW5qZWN0KElkR2VuZXJhdG9yKS5nZXRJZCgnbW9ua2V5LWFjY29yZGlvbi0nKTtcblxuICBwcm90ZWN0ZWQgX2lkITogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGdldCBpZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9pZDtcbiAgfVxuXG4gIHNldCBpZCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5faWQgPSB2YWx1ZSB8fCB0aGlzLl91aWQ7XG4gIH1cblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tc2VsZi1hc3NpZ25cbiAgICB0aGlzLmlkID0gdGhpcy5pZDtcbiAgfVxuXG4gIG9uQ2xpY2soKSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiaGVhZGVyXCIgKGNsaWNrKT1cIm9uQ2xpY2soKVwiPlxuICA8ZGl2IGNsYXNzPVwidGl0bGVcIj5cbiAgICBAaWYgKHRpdGxlUmVmKSB7XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGl0bGVSZWZcIiAvPlxuICAgIH0gQGVsc2Uge1xuICAgICAge3sgdGl0bGVTdHIgfX1cbiAgICB9XG4gIDwvZGl2PlxuICA8ZGl2IFtpbm5lckhUTUxdPVwiaW1nQXJyb3dEb3duXCIgY2xhc3M9XCJpY29uXCIgW2NsYXNzLnJvdGF0ZWRdPVwib3BlblwiPjwvZGl2PlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwiY29udGVudC13cmFwcGVyXCI+XG4gIEBpZiAob3Blbikge1xuICAgIDxkaXYgW0Bjb250ZW50XT5cbiAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './monkey-alert.component';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1hbGVydC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9tb25rZXktYWxlcnQuY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/** ************************
|
|
2
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4
|
+
* MIT Licence
|
|
5
|
+
************************* */
|
|
6
|
+
import { Component, inject, Input, input, output, ViewEncapsulation } from '@angular/core';
|
|
7
|
+
import { IdGenerator } from '../../../utils';
|
|
8
|
+
import { MonkeyIconComponent } from '../monkey-icon';
|
|
9
|
+
import * as i0 from "@angular/core";
|
|
10
|
+
export class MonkeyAlertComponent {
|
|
11
|
+
get id() {
|
|
12
|
+
return this._id;
|
|
13
|
+
}
|
|
14
|
+
set id(value) {
|
|
15
|
+
this._id = value || this._uid;
|
|
16
|
+
}
|
|
17
|
+
constructor() {
|
|
18
|
+
this.buttonLabel = input('');
|
|
19
|
+
this.message = input.required();
|
|
20
|
+
this.title = input.required();
|
|
21
|
+
this.type = input.required();
|
|
22
|
+
this.onButtonClicked = output();
|
|
23
|
+
this._uid = inject(IdGenerator).getId('monkey-alert-');
|
|
24
|
+
// eslint-disable-next-line no-self-assign
|
|
25
|
+
this.id = this.id;
|
|
26
|
+
}
|
|
27
|
+
icon(type) {
|
|
28
|
+
const typeIcons = {
|
|
29
|
+
alert: 'warning-outline',
|
|
30
|
+
default: 'info',
|
|
31
|
+
error: 'error-outline',
|
|
32
|
+
info: 'info',
|
|
33
|
+
success: 'checkmark-big-circle'
|
|
34
|
+
};
|
|
35
|
+
return typeIcons[type];
|
|
36
|
+
}
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:8px;padding:24px}monkey-alert .monkey-alert__card.alert{background-color:#fff8eb;border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:#f8fafb;border:solid 2px #bdc1c7}monkey-alert .monkey-alert__card.default>.mk-i{color:#1f2024}monkey-alert .monkey-alert__card.error{background-color:#ffecec;border:solid 2px #fa3838}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-700)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:#f5fffb;border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column;gap:8px}monkey-alert .monkey-alert__card__title{color:#1f2024;font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:#545a63;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:#1f2024;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
39
|
+
}
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
41
|
+
type: Component,
|
|
42
|
+
args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyIconComponent], selector: 'monkey-alert', standalone: true, host: {
|
|
43
|
+
'data-testid': 'monkey-alert',
|
|
44
|
+
'[attr.id]': 'id',
|
|
45
|
+
'[id]': 'id'
|
|
46
|
+
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n {{ buttonLabel() }}\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:8px;padding:24px}monkey-alert .monkey-alert__card.alert{background-color:#fff8eb;border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:#f8fafb;border:solid 2px #bdc1c7}monkey-alert .monkey-alert__card.default>.mk-i{color:#1f2024}monkey-alert .monkey-alert__card.error{background-color:#ffecec;border:solid 2px #fa3838}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-700)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:#f5fffb;border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column;gap:8px}monkey-alert .monkey-alert__card__title{color:#1f2024;font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:#545a63;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:#1f2024;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px;text-decoration:underline}\n"] }]
|
|
47
|
+
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}] } });
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ua2V5LWFsZXJ0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21vbmtleS1zdHlsZS1ndWlkZS12Mi9zcmMvbGliL2NvbXBvbmVudHMvbW9ua2V5LWFsZXJ0L21vbmtleS1hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1hbGVydC9tb25rZXktYWxlcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7NkJBSTZCO0FBQzdCLE9BQU8sRUFDTCxTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxLQUFLLEVBRUwsTUFBTSxFQUVOLGlCQUFpQixFQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFN0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBZXJELE1BQU0sT0FBTyxvQkFBb0I7SUFlL0IsSUFDSSxFQUFFO1FBQ0osT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQ2xCLENBQUM7SUFFRCxJQUFJLEVBQUUsQ0FBQyxLQUFhO1FBQ2xCLElBQUksQ0FBQyxHQUFHLEdBQUcsS0FBSyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEMsQ0FBQztJQUVEO1FBdkJBLGdCQUFXLEdBQXdCLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUU3QyxZQUFPLEdBQXdCLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztRQUV4RCxVQUFLLEdBQXdCLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztRQUV0RCxTQUFJLEdBQWlDLEtBQUssQ0FBQyxRQUFRLEVBQW1CLENBQUM7UUFFdkUsb0JBQWUsR0FBMkIsTUFBTSxFQUFRLENBQUM7UUFFL0MsU0FBSSxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxLQUFLLENBQUMsZUFBZSxDQUFDLENBQUM7UUFjMUQsMENBQTBDO1FBQzFDLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsSUFBSSxDQUFDLElBQXFCO1FBQ3hCLE1BQU0sU0FBUyxHQUFHO1lBQ2hCLEtBQUssRUFBRSxpQkFBaUI7WUFDeEIsT0FBTyxFQUFFLE1BQU07WUFDZixLQUFLLEVBQUUsZUFBZTtZQUN0QixJQUFJLEVBQUUsTUFBTTtZQUNaLE9BQU8sRUFBRSxzQkFBc0I7U0FDaEMsQ0FBQztRQUVGLE9BQU8sU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pCLENBQUM7K0dBdkNVLG9CQUFvQjttR0FBcEIsb0JBQW9CLDYwQkNoQ2pDLHVqQkFnQkEsc2pEREtZLG1CQUFtQjs7NEZBV2xCLG9CQUFvQjtrQkFiaEMsU0FBUztvQ0FDTyxpQkFBaUIsQ0FBQyxJQUFJLFdBQzVCLENBQUMsbUJBQW1CLENBQUMsWUFDcEIsY0FBYyxjQUNaLElBQUksUUFHVjt3QkFDSixhQUFhLEVBQUUsY0FBYzt3QkFDN0IsV0FBVyxFQUFFLElBQUk7d0JBQ2pCLE1BQU0sRUFBRSxJQUFJO3FCQUNiO3dEQWtCRyxFQUFFO3NCQURMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogKioqKioqKioqKioqKioqKioqKioqKioqXG4gKiBDb3B5cmlnaHQgTW9ua2V5IEV4Y2hhbmdlLiBBbGwgUmlnaHRzIFJlc2VydmVkXG4gKiBUaGlzIHN0eWxlIGd1aWRlIHdhcyBkZXZlbG9wZWQgYnkgTW9ua2V5IEV4Y2hhbmdlIFRlYW1cbiAqIE1JVCBMaWNlbmNlXG4gKioqKioqKioqKioqKioqKioqKioqKioqKiAqL1xuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBpbmplY3QsXG4gIElucHV0LFxuICBpbnB1dCxcbiAgSW5wdXRTaWduYWwsXG4gIG91dHB1dCxcbiAgT3V0cHV0RW1pdHRlclJlZixcbiAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJZEdlbmVyYXRvciB9IGZyb20gJy4uLy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHR5cGUgTW9ua2V5QWxlcnRUeXBlIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBNb25rZXlJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9ua2V5LWljb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaW1wb3J0czogW01vbmtleUljb25Db21wb25lbnRdLFxuICBzZWxlY3RvcjogJ21vbmtleS1hbGVydCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHN0eWxlVXJsOiAnLi9tb25rZXktYWxlcnQuY29tcG9uZW50LnNjc3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9ua2V5LWFsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgaG9zdDoge1xuICAgICdkYXRhLXRlc3RpZCc6ICdtb25rZXktYWxlcnQnLFxuICAgICdbYXR0ci5pZF0nOiAnaWQnLFxuICAgICdbaWRdJzogJ2lkJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIE1vbmtleUFsZXJ0Q29tcG9uZW50IHtcbiAgYnV0dG9uTGFiZWw6IElucHV0U2lnbmFsPHN0cmluZz4gPSBpbnB1dCgnJyk7XG5cbiAgbWVzc2FnZTogSW5wdXRTaWduYWw8c3RyaW5nPiA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcblxuICB0aXRsZTogSW5wdXRTaWduYWw8c3RyaW5nPiA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcblxuICB0eXBlOiBJbnB1dFNpZ25hbDxNb25rZXlBbGVydFR5cGU+ID0gaW5wdXQucmVxdWlyZWQ8TW9ua2V5QWxlcnRUeXBlPigpO1xuXG4gIG9uQnV0dG9uQ2xpY2tlZDogT3V0cHV0RW1pdHRlclJlZjx2b2lkPiA9IG91dHB1dDx2b2lkPigpO1xuXG4gIHByb3RlY3RlZCBfdWlkID0gaW5qZWN0KElkR2VuZXJhdG9yKS5nZXRJZCgnbW9ua2V5LWFsZXJ0LScpO1xuXG4gIHByb3RlY3RlZCBfaWQhOiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgZ2V0IGlkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX2lkO1xuICB9XG5cbiAgc2V0IGlkKHZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9pZCA9IHZhbHVlIHx8IHRoaXMuX3VpZDtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1zZWxmLWFzc2lnblxuICAgIHRoaXMuaWQgPSB0aGlzLmlkO1xuICB9XG5cbiAgaWNvbih0eXBlOiBNb25rZXlBbGVydFR5cGUpOiBzdHJpbmcge1xuICAgIGNvbnN0IHR5cGVJY29ucyA9IHtcbiAgICAgIGFsZXJ0OiAnd2FybmluZy1vdXRsaW5lJyxcbiAgICAgIGRlZmF1bHQ6ICdpbmZvJyxcbiAgICAgIGVycm9yOiAnZXJyb3Itb3V0bGluZScsXG4gICAgICBpbmZvOiAnaW5mbycsXG4gICAgICBzdWNjZXNzOiAnY2hlY2ttYXJrLWJpZy1jaXJjbGUnXG4gICAgfTtcblxuICAgIHJldHVybiB0eXBlSWNvbnNbdHlwZV07XG4gIH1cbn1cbiIsIjxkaXYgW2NsYXNzXT1cIidtb25rZXktYWxlcnRfX2NhcmQgJyArIHR5cGUoKVwiPlxuICBAaWYgKHR5cGUoKSkge1xuICAgIDxtb25rZXktaWNvbiBzaXplPVwibGdcIiBbY2xhc3NdPVwiJ21vbmtleS1hbGVydF9fY2FyZF9fdHlwZS0nICsgdHlwZSgpXCIgW2ljb25dPVwiaWNvbih0eXBlKCkpXCIgLz5cbiAgfVxuICA8ZGl2IGNsYXNzPVwibW9ua2V5LWFsZXJ0X19jYXJkX19jb250ZW50XCI+XG4gICAgPGg0IGNsYXNzPVwibW9ua2V5LWFsZXJ0X19jYXJkX190aXRsZVwiPnt7IHRpdGxlKCkgfX08L2g0PlxuICAgIDxoNSBjbGFzcz1cIm1vbmtleS1hbGVydF9fY2FyZF9fbWVzc2FnZVwiPnt7IG1lc3NhZ2UoKSB9fTwvaDU+XG4gICAgQGlmIChidXR0b25MYWJlbCgpKSB7XG4gICAgICA8ZGl2PlxuICAgICAgICA8YSBjbGFzcz1cIm1vbmtleS1hbGVydF9fY2FyZF9fbGlua1wiIChjbGljayk9XCJvbkJ1dHRvbkNsaWNrZWQuZW1pdCgpXCI+XG4gICAgICAgICAge3sgYnV0dG9uTGFiZWwoKSB9fVxuICAgICAgICA8L2E+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './monkey-breadcrumb.component';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1icmVhZGNydW1iL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsK0JBQStCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL21vbmtleS1icmVhZGNydW1iLmNvbXBvbmVudCc7XG4iXX0=
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/** ************************
|
|
2
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4
|
+
* MIT Licence
|
|
5
|
+
************************* */
|
|
6
|
+
import { CommonModule } from '@angular/common';
|
|
7
|
+
import { booleanAttribute, Component, inject, Input, ViewEncapsulation } from '@angular/core';
|
|
8
|
+
import { Router } from '@angular/router';
|
|
9
|
+
import { IdGenerator } from '../../../utils';
|
|
10
|
+
import * as i0 from "@angular/core";
|
|
11
|
+
import * as i1 from "@angular/common";
|
|
12
|
+
export class MonkeyBreadcrumbComponent {
|
|
13
|
+
get id() {
|
|
14
|
+
return this._id;
|
|
15
|
+
}
|
|
16
|
+
set id(value) {
|
|
17
|
+
this._id = value || this._uid;
|
|
18
|
+
}
|
|
19
|
+
constructor() {
|
|
20
|
+
this.colapsed = false;
|
|
21
|
+
this._router = inject(Router);
|
|
22
|
+
this._uid = inject(IdGenerator).getId('monkey-breadcrumb-');
|
|
23
|
+
// eslint-disable-next-line no-self-assign
|
|
24
|
+
this.id = this.id;
|
|
25
|
+
}
|
|
26
|
+
handleNavigate(item) {
|
|
27
|
+
if (item.callback) {
|
|
28
|
+
item.callback();
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this._router.navigate([item.path]);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <a class=\"first\" (click)=\"handleNavigate(first)\">\n {{ first.label | titlecase }}\n </a>\n <span>/</span>\n @if(colapsed){\n <span>...</span>\n <span>/</span>\n }\n <a class=\"last\" (click)=\"handleNavigate(last)\">\n {{ last.label | titlecase }}\n </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
36
|
+
}
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
|
|
38
|
+
type: Component,
|
|
39
|
+
args: [{ selector: 'monkey-breadcrumb', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
|
|
40
|
+
'data-testid': 'monkey-breadcrumb',
|
|
41
|
+
'[attr.id]': 'id',
|
|
42
|
+
'[id]': 'id'
|
|
43
|
+
}, template: "<div class=\"breadcrumbs\">\n <a class=\"first\" (click)=\"handleNavigate(first)\">\n {{ first.label | titlecase }}\n </a>\n <span>/</span>\n @if(colapsed){\n <span>...</span>\n <span>/</span>\n }\n <a class=\"last\" (click)=\"handleNavigate(last)\">\n {{ last.label | titlecase }}\n </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"] }]
|
|
44
|
+
}], ctorParameters: () => [], propDecorators: { first: [{
|
|
45
|
+
type: Input,
|
|
46
|
+
args: [{ required: true }]
|
|
47
|
+
}], last: [{
|
|
48
|
+
type: Input,
|
|
49
|
+
args: [{ required: true }]
|
|
50
|
+
}], colapsed: [{
|
|
51
|
+
type: Input,
|
|
52
|
+
args: [{ transform: booleanAttribute }]
|
|
53
|
+
}], id: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}] } });
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ua2V5LWJyZWFkY3J1bWIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbW9ua2V5LXN0eWxlLWd1aWRlLXYyL3NyYy9saWIvY29tcG9uZW50cy9tb25rZXktYnJlYWRjcnVtYi9tb25rZXktYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb25rZXktc3R5bGUtZ3VpZGUtdjIvc3JjL2xpYi9jb21wb25lbnRzL21vbmtleS1icmVhZGNydW1iL21vbmtleS1icmVhZGNydW1iLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OzZCQUk2QjtBQUM3QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQWdCN0MsTUFBTSxPQUFPLHlCQUF5QjtJQWFwQyxJQUNJLEVBQUU7UUFDSixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUM7SUFDbEIsQ0FBQztJQUVELElBQUksRUFBRSxDQUFDLEtBQWE7UUFDbEIsSUFBSSxDQUFDLEdBQUcsR0FBRyxLQUFLLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQztJQUNoQyxDQUFDO0lBRUQ7UUFqQndDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFeEQsWUFBTyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV6QixTQUFJLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBYy9ELDBDQUEwQztRQUMxQyxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELGNBQWMsQ0FBQyxJQUFnQjtRQUM3QixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDbEIsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLENBQUM7SUFDSCxDQUFDOytHQWpDVSx5QkFBeUI7bUdBQXpCLHlCQUF5QixnSUFLaEIsZ0JBQWdCLGtKQzdCdEMsMlRBYUEsNFhEQ1ksWUFBWTs7NEZBVVgseUJBQXlCO2tCQWJyQyxTQUFTOytCQUNFLG1CQUFtQixjQUNqQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsaUJBR1IsaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDSixhQUFhLEVBQUUsbUJBQW1CO3dCQUNsQyxXQUFXLEVBQUUsSUFBSTt3QkFDakIsTUFBTSxFQUFFLElBQUk7cUJBQ2I7d0RBRzBCLEtBQUs7c0JBQS9CLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUVFLElBQUk7c0JBQTlCLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUVlLFFBQVE7c0JBQS9DLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBU2xDLEVBQUU7c0JBREwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiAqKioqKioqKioqKioqKioqKioqKioqKipcbiAqIENvcHlyaWdodCBNb25rZXkgRXhjaGFuZ2UuIEFsbCBSaWdodHMgUmVzZXJ2ZWRcbiAqIFRoaXMgc3R5bGUgZ3VpZGUgd2FzIGRldmVsb3BlZCBieSBNb25rZXkgRXhjaGFuZ2UgVGVhbVxuICogTUlUIExpY2VuY2VcbiAqKioqKioqKioqKioqKioqKioqKioqKioqICovXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgYm9vbGVhbkF0dHJpYnV0ZSwgQ29tcG9uZW50LCBpbmplY3QsIElucHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IElkR2VuZXJhdG9yIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgQnJlYWRjcnVtYiB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtb25rZXktYnJlYWRjcnVtYicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9ua2V5LWJyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vbW9ua2V5LWJyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBob3N0OiB7XG4gICAgJ2RhdGEtdGVzdGlkJzogJ21vbmtleS1icmVhZGNydW1iJyxcbiAgICAnW2F0dHIuaWRdJzogJ2lkJyxcbiAgICAnW2lkXSc6ICdpZCdcbiAgfVxufSlcbmV4cG9ydCBjbGFzcyBNb25rZXlCcmVhZGNydW1iQ29tcG9uZW50IHtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgZmlyc3QhOiBCcmVhZGNydW1iO1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIGxhc3QhOiBCcmVhZGNydW1iO1xuXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBjb2xhcHNlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIHByb3RlY3RlZCBfcm91dGVyID0gaW5qZWN0KFJvdXRlcik7XG5cbiAgcHJvdGVjdGVkIF91aWQgPSBpbmplY3QoSWRHZW5lcmF0b3IpLmdldElkKCdtb25rZXktYnJlYWRjcnVtYi0nKTtcblxuICBwcm90ZWN0ZWQgX2lkITogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGdldCBpZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9pZDtcbiAgfVxuXG4gIHNldCBpZCh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy5faWQgPSB2YWx1ZSB8fCB0aGlzLl91aWQ7XG4gIH1cblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tc2VsZi1hc3NpZ25cbiAgICB0aGlzLmlkID0gdGhpcy5pZDtcbiAgfVxuXG4gIGhhbmRsZU5hdmlnYXRlKGl0ZW06IEJyZWFkY3J1bWIpIHtcbiAgICBpZiAoaXRlbS5jYWxsYmFjaykge1xuICAgICAgaXRlbS5jYWxsYmFjaygpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9yb3V0ZXIubmF2aWdhdGUoW2l0ZW0ucGF0aF0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImJyZWFkY3J1bWJzXCI+XG4gIDxhIGNsYXNzPVwiZmlyc3RcIiAoY2xpY2spPVwiaGFuZGxlTmF2aWdhdGUoZmlyc3QpXCI+XG4gICAge3sgZmlyc3QubGFiZWwgfCB0aXRsZWNhc2UgfX1cbiAgPC9hPlxuICA8c3Bhbj4vPC9zcGFuPlxuICBAaWYoY29sYXBzZWQpe1xuICA8c3Bhbj4uLi48L3NwYW4+XG4gIDxzcGFuPi88L3NwYW4+XG4gIH1cbiAgPGEgY2xhc3M9XCJsYXN0XCIgKGNsaWNrKT1cImhhbmRsZU5hdmlnYXRlKGxhc3QpXCI+XG4gICAge3sgbGFzdC5sYWJlbCB8IHRpdGxlY2FzZSB9fVxuICA8L2E+XG48L2Rpdj5cbiJdfQ==
|