monkey-style-guide-v2 0.0.28 → 0.0.29
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 +3 -3
- package/assets/scss/input/_index.scss +1 -1
- package/assets/scss/partials/_breakpoints.scss +145 -0
- package/assets/scss/partials/_grid-system.scss +5069 -0
- package/assets/scss/partials/_helper-classes.scss +335 -0
- package/assets/scss/partials/_index.scss +8 -3
- package/assets/scss/partials/_scrollbars.scss +30 -0
- package/assets/scss/partials/_skeleton-loading.scss +67 -0
- package/assets/scss/partials/_style-reset.scss +11 -9
- package/assets/scss/partials/_variables.scss +49 -111
- package/assets/scss/table/_index.scss +1 -1
- package/assets/scss/theme.scss +6 -13
- package/assets/scss/typography/_index.scss +1 -3
- package/assets/scss/typography/_styles.scss +103 -103
- package/fesm2022/monkey-style-guide-v2.mjs +16 -14
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/monkey-style-guide-v2-0.0.29.tgz +0 -0
- package/package.json +1 -1
- package/assets/scss/typography/_function.scss +0 -23
- package/assets/scss/typography/_mixins.scss +0 -111
- package/monkey-style-guide-v2-0.0.28.tgz +0 -0
package/assets/scss/theme.scss
CHANGED
|
@@ -5,16 +5,9 @@
|
|
|
5
5
|
* This style guide was developed by Monkey Exchange Team
|
|
6
6
|
* MIT Licence
|
|
7
7
|
************************* */
|
|
8
|
-
@
|
|
9
|
-
@
|
|
10
|
-
@
|
|
11
|
-
@
|
|
12
|
-
@
|
|
13
|
-
@
|
|
14
|
-
|
|
15
|
-
:root {
|
|
16
|
-
--mecx-color-box-shadow: #00000029;
|
|
17
|
-
--mecx-color-info: #003687;
|
|
18
|
-
--mecx-color-link: #06c;
|
|
19
|
-
--mecx-color-white: #fff;
|
|
20
|
-
}
|
|
8
|
+
@use '@angular/cdk/overlay-prebuilt.css';
|
|
9
|
+
@use './partials';
|
|
10
|
+
@use './typography';
|
|
11
|
+
@use './input';
|
|
12
|
+
@use './directives';
|
|
13
|
+
@use './table';
|
|
@@ -4,9 +4,7 @@
|
|
|
4
4
|
* MIT Licence
|
|
5
5
|
************************* */
|
|
6
6
|
|
|
7
|
-
@
|
|
8
|
-
@import '../partials/variables';
|
|
9
|
-
@import 'function';
|
|
7
|
+
@use '../partials/variables';
|
|
10
8
|
|
|
11
9
|
* {
|
|
12
10
|
font-family: var(--mecx-font-name), arial, sans-serif;
|
|
@@ -21,85 +19,85 @@ body {
|
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
h1 {
|
|
24
|
-
@include mecx-font(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
);
|
|
22
|
+
// @include mecx-font(
|
|
23
|
+
// (
|
|
24
|
+
// size: f-size(xxl)
|
|
25
|
+
// )
|
|
26
|
+
// );
|
|
29
27
|
}
|
|
30
28
|
|
|
31
29
|
h2 {
|
|
32
|
-
@include mecx-font(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
);
|
|
30
|
+
// @include mecx-font(
|
|
31
|
+
// (
|
|
32
|
+
// size: f-size(xl)
|
|
33
|
+
// )
|
|
34
|
+
// );
|
|
37
35
|
}
|
|
38
36
|
|
|
39
37
|
h3 {
|
|
40
|
-
@include mecx-font(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
);
|
|
38
|
+
// @include mecx-font(
|
|
39
|
+
// (
|
|
40
|
+
// size: f-size(lg)
|
|
41
|
+
// )
|
|
42
|
+
// );
|
|
45
43
|
}
|
|
46
44
|
|
|
47
45
|
h4 {
|
|
48
|
-
@include mecx-font(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
);
|
|
46
|
+
// @include mecx-font(
|
|
47
|
+
// (
|
|
48
|
+
// size: f-size(md)
|
|
49
|
+
// )
|
|
50
|
+
// );
|
|
53
51
|
}
|
|
54
52
|
|
|
55
53
|
h5 {
|
|
56
|
-
@include mecx-font(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
);
|
|
54
|
+
// @include mecx-font(
|
|
55
|
+
// (
|
|
56
|
+
// size: f-size(sm)
|
|
57
|
+
// )
|
|
58
|
+
// );
|
|
61
59
|
}
|
|
62
60
|
|
|
63
61
|
h6 {
|
|
64
|
-
@include mecx-font;
|
|
62
|
+
// @include mecx-font;
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
p {
|
|
68
|
-
@include mecx-font;
|
|
66
|
+
// @include mecx-font;
|
|
69
67
|
}
|
|
70
68
|
|
|
71
69
|
a {
|
|
72
|
-
text-decoration: none;
|
|
73
|
-
cursor: pointer;
|
|
70
|
+
// text-decoration: none;
|
|
71
|
+
// cursor: pointer;
|
|
74
72
|
|
|
75
|
-
@include mecx-font(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
);
|
|
73
|
+
// @include mecx-font(
|
|
74
|
+
// (
|
|
75
|
+
// color: var(--mecx-color-link)
|
|
76
|
+
// )
|
|
77
|
+
// );
|
|
80
78
|
|
|
81
|
-
&:hover {
|
|
82
|
-
|
|
83
|
-
}
|
|
79
|
+
// &:hover {
|
|
80
|
+
// text-decoration: underline;
|
|
81
|
+
// }
|
|
84
82
|
}
|
|
85
83
|
|
|
86
84
|
.bg {
|
|
87
|
-
@include gray-cl('background-color');
|
|
88
|
-
@include theme-cl('background-color');
|
|
89
|
-
@include warning-cl('background-color');
|
|
90
|
-
@include success-cl('background-color');
|
|
85
|
+
// @include gray-cl('background-color');
|
|
86
|
+
// @include theme-cl('background-color');
|
|
87
|
+
// @include warning-cl('background-color');
|
|
88
|
+
// @include success-cl('background-color');
|
|
91
89
|
}
|
|
92
90
|
|
|
93
91
|
.txt {
|
|
94
|
-
@include gray-cl;
|
|
95
|
-
@include theme-cl;
|
|
96
|
-
@include warning-cl;
|
|
97
|
-
@include success-cl;
|
|
98
|
-
@include error-cl;
|
|
99
|
-
@include align;
|
|
100
|
-
@include sizes;
|
|
101
|
-
@include weight;
|
|
102
|
-
@include line-height;
|
|
92
|
+
// @include gray-cl;
|
|
93
|
+
// @include theme-cl;
|
|
94
|
+
// @include warning-cl;
|
|
95
|
+
// @include success-cl;
|
|
96
|
+
// @include error-cl;
|
|
97
|
+
// @include align;
|
|
98
|
+
// @include sizes;
|
|
99
|
+
// @include weight;
|
|
100
|
+
// @include line-height;
|
|
103
101
|
|
|
104
102
|
&-none {
|
|
105
103
|
text-decoration: none;
|
|
@@ -122,73 +120,75 @@ a {
|
|
|
122
120
|
}
|
|
123
121
|
|
|
124
122
|
&-shadow {
|
|
125
|
-
text-shadow: 2px 2px 4px;
|
|
126
|
-
color: f-cl-gray(700);
|
|
123
|
+
// text-shadow: 2px 2px 4px;
|
|
124
|
+
// color: f-cl-gray(700);
|
|
127
125
|
}
|
|
128
126
|
}
|
|
129
127
|
|
|
130
128
|
.mecx-title-page {
|
|
131
|
-
@include mecx-font(
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
);
|
|
139
|
-
|
|
129
|
+
// @include mecx-font(
|
|
130
|
+
// (
|
|
131
|
+
// size: f-size(xl),
|
|
132
|
+
// weight: f-weight(bold),
|
|
133
|
+
// height: f-lh(super),
|
|
134
|
+
// color: f-cl-gray(900)
|
|
135
|
+
// )
|
|
136
|
+
// );
|
|
137
|
+
|
|
138
|
+
// font-style: normal;
|
|
140
139
|
}
|
|
141
140
|
|
|
142
141
|
.mecx-subtitle-page {
|
|
143
|
-
@include mecx-font(
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
|
|
142
|
+
// @include mecx-font(
|
|
143
|
+
// (
|
|
144
|
+
// size: f-size(xs),
|
|
145
|
+
// weight: f-weight(regular),
|
|
146
|
+
// height: f-lh(med),
|
|
147
|
+
// color: f-cl-gray(700)
|
|
148
|
+
// )
|
|
149
|
+
// );
|
|
150
|
+
|
|
151
|
+
// font-style: normal;
|
|
152
|
+
// letter-spacing: 0.48px;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
.mecx-description {
|
|
156
|
-
@include mecx-font(
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
);
|
|
156
|
+
// @include mecx-font(
|
|
157
|
+
// (
|
|
158
|
+
// size: f-size(xs),
|
|
159
|
+
// weight: f-weight(regular),
|
|
160
|
+
// height: f-lh(md)
|
|
161
|
+
// )
|
|
162
|
+
// );
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
.mecx-title {
|
|
166
|
-
@include mecx-font(
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
);
|
|
166
|
+
// @include mecx-font(
|
|
167
|
+
// (
|
|
168
|
+
// size: f-size(xxs),
|
|
169
|
+
// weight: f-weight(regular),
|
|
170
|
+
// height: f-lh(md),
|
|
171
|
+
// color: f-cl-gray(700)
|
|
172
|
+
// )
|
|
173
|
+
// );
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
.mecx-value {
|
|
177
|
-
@include mecx-font(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
);
|
|
177
|
+
// @include mecx-font(
|
|
178
|
+
// (
|
|
179
|
+
// size: f-size(xxs),
|
|
180
|
+
// weight: f-weight(regular),
|
|
181
|
+
// height: f-lh(md)
|
|
182
|
+
// )
|
|
183
|
+
// );
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
.mecx-label {
|
|
187
|
-
@include mecx-font(
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
);
|
|
187
|
+
// @include mecx-font(
|
|
188
|
+
// (
|
|
189
|
+
// size: f-size(xxs),
|
|
190
|
+
// weight: f-weight(regular),
|
|
191
|
+
// height: f-lh(md)
|
|
192
|
+
// )
|
|
193
|
+
// );
|
|
194
194
|
}
|
|
@@ -583,7 +583,7 @@ class MonkeyAlertComponent {
|
|
|
583
583
|
return typeIcons[type];
|
|
584
584
|
}
|
|
585
585
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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:
|
|
586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}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:var(--mecx-color-success-100);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:var(--mecx-spaces-xs)}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-font-s-sm);font-weight:var(--mecx-font-w-regular);letter-spacing:.54px;line-height:var(--mecx-font-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-font-s-xxs);font-weight:var(--mecx-font-w-regular);letter-spacing:.42px;line-height:var(--mecx-font-lh-24)}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-font-s-xxs);font-weight:var(--mecx-font-w-regular);letter-spacing:.42px;line-height:var(--mecx-font-lh-24);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
587
587
|
}
|
|
588
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
589
589
|
type: Component,
|
|
@@ -591,7 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
591
591
|
'data-testid': 'monkey-alert',
|
|
592
592
|
'[attr.id]': 'id',
|
|
593
593
|
'[id]': 'id'
|
|
594
|
-
}, 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:
|
|
594
|
+
}, 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:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}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:var(--mecx-color-success-100);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:var(--mecx-spaces-xs)}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-font-s-sm);font-weight:var(--mecx-font-w-regular);letter-spacing:.54px;line-height:var(--mecx-font-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-font-s-xxs);font-weight:var(--mecx-font-w-regular);letter-spacing:.42px;line-height:var(--mecx-font-lh-24)}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-font-s-xxs);font-weight:var(--mecx-font-w-regular);letter-spacing:.42px;line-height:var(--mecx-font-lh-24);text-decoration:underline}\n"] }]
|
|
595
595
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
596
596
|
type: Input
|
|
597
597
|
}] } });
|
|
@@ -762,7 +762,7 @@ class MonkeyBreadcrumbComponent {
|
|
|
762
762
|
}
|
|
763
763
|
}
|
|
764
764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
765
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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
|
|
765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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:var(--mecx-color-gray-900);text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:var(--mecx-spaces-xs);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
766
766
|
}
|
|
767
767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
|
|
768
768
|
type: Component,
|
|
@@ -770,7 +770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
770
770
|
'data-testid': 'monkey-breadcrumb',
|
|
771
771
|
'[attr.id]': 'id',
|
|
772
772
|
'[id]': 'id'
|
|
773
|
-
}, 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
|
|
773
|
+
}, 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:var(--mecx-color-gray-900);text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:var(--mecx-spaces-xs);align-items:center}\n"] }]
|
|
774
774
|
}], ctorParameters: () => [], propDecorators: { first: [{
|
|
775
775
|
type: Input,
|
|
776
776
|
args: [{ required: true }]
|
|
@@ -822,7 +822,7 @@ class MonkeyButtonComponent {
|
|
|
822
822
|
return this.elementRef.nativeElement;
|
|
823
823
|
}
|
|
824
824
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled\">\n <div class=\"content\">\n <ng-content select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content select=\"[last]\"></ng-content>\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:
|
|
825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled\">\n <div class=\"content\">\n <ng-content select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content select=\"[last]\"></ng-content>\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
826
826
|
}
|
|
827
827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
828
828
|
type: Component,
|
|
@@ -830,7 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
830
830
|
'data-testid': 'monkey-button',
|
|
831
831
|
'[attr.id]': 'id',
|
|
832
832
|
'[id]': 'id'
|
|
833
|
-
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled\">\n <div class=\"content\">\n <ng-content select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content select=\"[last]\"></ng-content>\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:
|
|
833
|
+
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled\">\n <div class=\"content\">\n <ng-content select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content select=\"[last]\"></ng-content>\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
834
834
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
835
835
|
type: Input
|
|
836
836
|
}], color: [{
|
|
@@ -1610,7 +1610,7 @@ class MonkeyCheckboxComponent {
|
|
|
1610
1610
|
useExisting: MonkeyCheckboxComponent,
|
|
1611
1611
|
multi: true
|
|
1612
1612
|
}
|
|
1613
|
-
], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:
|
|
1613
|
+
], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
1614
1614
|
trigger('iconAnimation', [
|
|
1615
1615
|
transition(':enter', [
|
|
1616
1616
|
animate('250ms ease-in-out', keyframes([
|
|
@@ -1670,7 +1670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1670
1670
|
'[class.sm]': 'size.includes("sm")',
|
|
1671
1671
|
'[class.md]': 'size.includes("md")',
|
|
1672
1672
|
'[class.lg]': 'size.includes("lg")'
|
|
1673
|
-
}, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:
|
|
1673
|
+
}, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
|
|
1674
1674
|
}], propDecorators: { infoChildren: [{
|
|
1675
1675
|
type: ContentChildren,
|
|
1676
1676
|
args: [MonkeyInfoDirective, { descendants: true }]
|
|
@@ -2665,7 +2665,7 @@ class MonkeyIconButtonComponent {
|
|
|
2665
2665
|
}
|
|
2666
2666
|
}
|
|
2667
2667
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n <div class=\"content\">\n <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:
|
|
2668
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n <div class=\"content\">\n <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2669
2669
|
}
|
|
2670
2670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
|
|
2671
2671
|
type: Component,
|
|
@@ -2673,7 +2673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2673
2673
|
'data-testid': 'monkey-icon-button',
|
|
2674
2674
|
'[attr.id]': 'id',
|
|
2675
2675
|
'[id]': 'id'
|
|
2676
|
-
}, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n <div class=\"content\">\n <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:
|
|
2676
|
+
}, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n <div class=\"content\">\n <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
2677
2677
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
2678
2678
|
type: Input
|
|
2679
2679
|
}], size: [{
|
|
@@ -4216,6 +4216,7 @@ class MonkeyInputPhoneComponent {
|
|
|
4216
4216
|
</monkey-select>
|
|
4217
4217
|
<input
|
|
4218
4218
|
#input
|
|
4219
|
+
type="tel"
|
|
4219
4220
|
class="mecx-input"
|
|
4220
4221
|
[disabled]="disabled"
|
|
4221
4222
|
placeholder="Enter phone number"
|
|
@@ -4255,6 +4256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4255
4256
|
</monkey-select>
|
|
4256
4257
|
<input
|
|
4257
4258
|
#input
|
|
4259
|
+
type="tel"
|
|
4258
4260
|
class="mecx-input"
|
|
4259
4261
|
[disabled]="disabled"
|
|
4260
4262
|
placeholder="Enter phone number"
|
|
@@ -6143,7 +6145,7 @@ class MonkeyToastComponent {
|
|
|
6143
6145
|
}
|
|
6144
6146
|
}
|
|
6145
6147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class", "animation": "this.animationState" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:
|
|
6148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class", "animation": "this.animationState" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-font-lh-24);font-size:var(--mecx-font-s-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-600)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6147
6149
|
}
|
|
6148
6150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyToastComponent, decorators: [{
|
|
6149
6151
|
type: Component,
|
|
@@ -6152,7 +6154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6152
6154
|
'(animationend)': 'onAnimationEnd($event)',
|
|
6153
6155
|
'[attr.id]': 'id',
|
|
6154
6156
|
'[id]': 'id'
|
|
6155
|
-
}, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:
|
|
6157
|
+
}, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-font-lh-24);font-size:var(--mecx-font-s-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-600)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
|
|
6156
6158
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
|
|
6157
6159
|
type: Input
|
|
6158
6160
|
}], icon: [{
|
|
@@ -6402,7 +6404,7 @@ class MonkeyTooltipComponent {
|
|
|
6402
6404
|
}
|
|
6403
6405
|
}
|
|
6404
6406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (template) {\n <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:
|
|
6407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (template) {\n <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);flex-wrap:wrap;text-align:center;color:var(--mecx-color-white);font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
6406
6408
|
}
|
|
6407
6409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
|
|
6408
6410
|
type: Component,
|
|
@@ -6413,7 +6415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6413
6415
|
'(animationend)': 'onAnimationEnd($event)',
|
|
6414
6416
|
'[attr.id]': 'id',
|
|
6415
6417
|
'[id]': 'id'
|
|
6416
|
-
}, template: "@if (template) {\n <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:
|
|
6418
|
+
}, template: "@if (template) {\n <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);flex-wrap:wrap;text-align:center;color:var(--mecx-color-white);font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"] }]
|
|
6417
6419
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{
|
|
6418
6420
|
type: Input
|
|
6419
6421
|
}], template: [{
|