monkey-style-guide-v2 0.0.33 → 0.0.35
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/partials/_helper-classes.scss +6 -6
- package/assets/scss/partials/_skeleton-loading.scss +28 -5
- package/assets/scss/theme.scss +1 -0
- package/assets/scss/util/_icon.scss +10 -0
- package/assets/scss/util/_index.scss +7 -0
- package/fesm2022/monkey-style-guide-v2.mjs +887 -132
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +2 -1
- package/lib/components/checkbox/checkbox.component.d.ts +1 -1
- package/lib/components/filter-bar/filter-bar.component.d.ts +15 -0
- package/lib/components/filter-bar/index.d.ts +6 -0
- package/lib/components/icon-button/icon-button.component.d.ts +2 -1
- package/lib/components/index.d.ts +3 -0
- package/lib/components/stepper/index.d.ts +3 -0
- package/lib/components/stepper/step/step.component.d.ts +23 -0
- package/lib/components/stepper/stepper.component.d.ts +22 -0
- package/lib/components/stepper/stepper.module.d.ts +10 -0
- package/lib/components/tabs/index.d.ts +4 -0
- package/lib/components/tabs/tab-link.directive.d.ts +22 -0
- package/lib/components/tabs/tab.component.d.ts +17 -0
- package/lib/components/tabs/tabs.component.d.ts +38 -0
- package/lib/components/tabs/tabs.module.d.ts +9 -0
- package/lib/services/index.d.ts +1 -0
- package/lib/services/stepper.service.d.ts +8 -0
- package/monkey-style-guide-v2-0.0.35.tgz +0 -0
- package/package.json +1 -1
- package/utils/icon.d.ts +1 -1
- package/utils/index.d.ts +0 -1
- package/monkey-style-guide-v2-0.0.33.tgz +0 -0
- package/utils/tests-utils.d.ts +0 -1
|
@@ -2,8 +2,9 @@ import { trigger, state, transition, style, animate, keyframes } from '@angular/
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe, DOCUMENT } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, effect, ElementRef, HostListener, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, NgZone, DestroyRef, Optional, Inject, NgModule, Injector, ChangeDetectorRef, forwardRef, ContentChildren, ChangeDetectionStrategy, LOCALE_ID, DEFAULT_CURRENCY_CODE, ContentChild, computed, ViewChildren,
|
|
6
|
-
import
|
|
5
|
+
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, effect, ElementRef, HostListener, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, NgZone, DestroyRef, Optional, Inject, NgModule, Injector, ChangeDetectorRef, forwardRef, ContentChildren, ChangeDetectionStrategy, LOCALE_ID, DEFAULT_CURRENCY_CODE, ContentChild, ViewChild, computed, ViewChildren, signal } from '@angular/core';
|
|
6
|
+
import * as i1$2 from '@angular/router';
|
|
7
|
+
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
|
|
7
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
9
|
import * as i2 from '@angular/forms';
|
|
9
10
|
import { NgControl, FormControlDirective, NgModel, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
|
|
@@ -36,10 +37,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
36
37
|
args: [{ providedIn: 'root' }]
|
|
37
38
|
}] });
|
|
38
39
|
|
|
39
|
-
function stripHtmlComments(htmlContent) {
|
|
40
|
-
return htmlContent.replace(/<!--(?!>)[\S\s]*?-->/g, '');
|
|
41
|
-
}
|
|
42
|
-
|
|
43
40
|
function getRandomString(len, charSet) {
|
|
44
41
|
charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
45
42
|
return new Array(len)
|
|
@@ -127,6 +124,38 @@ class UtilIconComponent {
|
|
|
127
124
|
</svg>
|
|
128
125
|
}
|
|
129
126
|
|
|
127
|
+
@case ('arrowRight') {
|
|
128
|
+
<svg
|
|
129
|
+
width="24"
|
|
130
|
+
height="24"
|
|
131
|
+
viewBox="0 0 24 24"
|
|
132
|
+
fill="none"
|
|
133
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
134
|
+
>
|
|
135
|
+
<path
|
|
136
|
+
d="M19 12H5"
|
|
137
|
+
stroke="var(--mecx-color-gray-900)"
|
|
138
|
+
stroke-width="1.5"
|
|
139
|
+
stroke-linecap="round"
|
|
140
|
+
stroke-linejoin="round"
|
|
141
|
+
/>
|
|
142
|
+
<path
|
|
143
|
+
d="M14 17L19 12"
|
|
144
|
+
stroke="var(--mecx-color-gray-900)"
|
|
145
|
+
stroke-width="1.5"
|
|
146
|
+
stroke-linecap="round"
|
|
147
|
+
stroke-linejoin="round"
|
|
148
|
+
/>
|
|
149
|
+
<path
|
|
150
|
+
d="M14 7L19 12"
|
|
151
|
+
stroke="var(--mecx-color-gray-900)"
|
|
152
|
+
stroke-width="1.5"
|
|
153
|
+
stroke-linecap="round"
|
|
154
|
+
stroke-linejoin="round"
|
|
155
|
+
/>
|
|
156
|
+
</svg>
|
|
157
|
+
}
|
|
158
|
+
|
|
130
159
|
@case ('check') {
|
|
131
160
|
<svg
|
|
132
161
|
width="12"
|
|
@@ -215,15 +244,29 @@ class UtilIconComponent {
|
|
|
215
244
|
></path>
|
|
216
245
|
</svg>
|
|
217
246
|
}
|
|
247
|
+
|
|
248
|
+
@case ('addPlus') {
|
|
249
|
+
<svg
|
|
250
|
+
width="24"
|
|
251
|
+
height="24"
|
|
252
|
+
viewBox="0 0 24 24"
|
|
253
|
+
fill="none"
|
|
254
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
255
|
+
>
|
|
256
|
+
<path
|
|
257
|
+
d="M11.340 2.281 C 7.073 2.553,3.439 5.660,2.499 9.840 C 2.187 11.227,2.187 12.773,2.499 14.160 C 3.317 17.797,6.203 20.683,9.840 21.501 C 11.233 21.814,12.770 21.813,14.176 21.498 C 17.465 20.759,20.161 18.310,21.244 15.076 C 21.795 13.432,21.887 11.556,21.501 9.840 C 20.683 6.203,17.797 3.317,14.160 2.499 C 13.288 2.303,12.254 2.223,11.340 2.281 M12.961 3.802 C 14.493 3.991,16.079 4.659,17.184 5.581 C 18.160 6.395,18.877 7.297,19.404 8.374 C 19.982 9.557,20.240 10.675,20.240 12.000 C 20.240 12.966,20.126 13.689,19.834 14.584 C 18.848 17.602,16.153 19.804,12.961 20.198 C 12.525 20.252,11.475 20.252,11.039 20.198 C 9.507 20.009,7.921 19.341,6.816 18.419 C 5.826 17.593,5.138 16.728,4.598 15.626 C 4.019 14.448,3.760 13.327,3.760 12.000 C 3.760 10.673,4.019 9.552,4.598 8.374 C 5.044 7.464,5.564 6.750,6.285 6.058 C 7.568 4.824,9.221 4.032,10.984 3.806 C 11.379 3.755,12.563 3.753,12.961 3.802 M11.815 7.277 C 11.638 7.321,11.461 7.456,11.353 7.631 L 11.260 7.780 11.248 9.508 L 11.236 11.236 9.505 11.248 L 7.774 11.260 7.612 11.367 C 7.372 11.526,7.267 11.721,7.267 12.007 C 7.267 12.203,7.286 12.270,7.383 12.408 C 7.447 12.499,7.572 12.610,7.660 12.656 C 7.814 12.737,7.886 12.740,9.528 12.752 L 11.236 12.764 11.248 14.492 L 11.260 16.220 11.353 16.369 C 11.710 16.943,12.576 16.812,12.716 16.162 C 12.744 16.031,12.760 15.374,12.760 14.358 L 12.760 12.760 14.358 12.760 C 15.374 12.760,16.031 12.744,16.162 12.716 C 16.904 12.557,16.924 11.471,16.189 11.286 C 16.064 11.255,15.479 11.240,14.382 11.240 L 12.760 11.240 12.759 9.630 C 12.758 8.669,12.741 7.948,12.717 7.841 C 12.623 7.432,12.215 7.177,11.815 7.277 "
|
|
258
|
+
stroke="none"
|
|
259
|
+
fill-rule="evenodd"
|
|
260
|
+
fill="var(--mecx-color-gray-900)"
|
|
261
|
+
></path>
|
|
262
|
+
</svg>
|
|
263
|
+
}
|
|
218
264
|
}
|
|
219
|
-
`, isInline: true }); }
|
|
265
|
+
`, isInline: true, styles: [":host{display:flex}\n"] }); }
|
|
220
266
|
}
|
|
221
267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UtilIconComponent, decorators: [{
|
|
222
268
|
type: Component,
|
|
223
|
-
args: [{
|
|
224
|
-
selector: 'util-icon',
|
|
225
|
-
standalone: true,
|
|
226
|
-
template: `
|
|
269
|
+
args: [{ selector: 'util-icon', template: `
|
|
227
270
|
@switch (name()) {
|
|
228
271
|
@case ('clear') {
|
|
229
272
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
@@ -263,6 +306,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
263
306
|
</svg>
|
|
264
307
|
}
|
|
265
308
|
|
|
309
|
+
@case ('arrowRight') {
|
|
310
|
+
<svg
|
|
311
|
+
width="24"
|
|
312
|
+
height="24"
|
|
313
|
+
viewBox="0 0 24 24"
|
|
314
|
+
fill="none"
|
|
315
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
316
|
+
>
|
|
317
|
+
<path
|
|
318
|
+
d="M19 12H5"
|
|
319
|
+
stroke="var(--mecx-color-gray-900)"
|
|
320
|
+
stroke-width="1.5"
|
|
321
|
+
stroke-linecap="round"
|
|
322
|
+
stroke-linejoin="round"
|
|
323
|
+
/>
|
|
324
|
+
<path
|
|
325
|
+
d="M14 17L19 12"
|
|
326
|
+
stroke="var(--mecx-color-gray-900)"
|
|
327
|
+
stroke-width="1.5"
|
|
328
|
+
stroke-linecap="round"
|
|
329
|
+
stroke-linejoin="round"
|
|
330
|
+
/>
|
|
331
|
+
<path
|
|
332
|
+
d="M14 7L19 12"
|
|
333
|
+
stroke="var(--mecx-color-gray-900)"
|
|
334
|
+
stroke-width="1.5"
|
|
335
|
+
stroke-linecap="round"
|
|
336
|
+
stroke-linejoin="round"
|
|
337
|
+
/>
|
|
338
|
+
</svg>
|
|
339
|
+
}
|
|
340
|
+
|
|
266
341
|
@case ('check') {
|
|
267
342
|
<svg
|
|
268
343
|
width="12"
|
|
@@ -351,9 +426,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
351
426
|
></path>
|
|
352
427
|
</svg>
|
|
353
428
|
}
|
|
429
|
+
|
|
430
|
+
@case ('addPlus') {
|
|
431
|
+
<svg
|
|
432
|
+
width="24"
|
|
433
|
+
height="24"
|
|
434
|
+
viewBox="0 0 24 24"
|
|
435
|
+
fill="none"
|
|
436
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
437
|
+
>
|
|
438
|
+
<path
|
|
439
|
+
d="M11.340 2.281 C 7.073 2.553,3.439 5.660,2.499 9.840 C 2.187 11.227,2.187 12.773,2.499 14.160 C 3.317 17.797,6.203 20.683,9.840 21.501 C 11.233 21.814,12.770 21.813,14.176 21.498 C 17.465 20.759,20.161 18.310,21.244 15.076 C 21.795 13.432,21.887 11.556,21.501 9.840 C 20.683 6.203,17.797 3.317,14.160 2.499 C 13.288 2.303,12.254 2.223,11.340 2.281 M12.961 3.802 C 14.493 3.991,16.079 4.659,17.184 5.581 C 18.160 6.395,18.877 7.297,19.404 8.374 C 19.982 9.557,20.240 10.675,20.240 12.000 C 20.240 12.966,20.126 13.689,19.834 14.584 C 18.848 17.602,16.153 19.804,12.961 20.198 C 12.525 20.252,11.475 20.252,11.039 20.198 C 9.507 20.009,7.921 19.341,6.816 18.419 C 5.826 17.593,5.138 16.728,4.598 15.626 C 4.019 14.448,3.760 13.327,3.760 12.000 C 3.760 10.673,4.019 9.552,4.598 8.374 C 5.044 7.464,5.564 6.750,6.285 6.058 C 7.568 4.824,9.221 4.032,10.984 3.806 C 11.379 3.755,12.563 3.753,12.961 3.802 M11.815 7.277 C 11.638 7.321,11.461 7.456,11.353 7.631 L 11.260 7.780 11.248 9.508 L 11.236 11.236 9.505 11.248 L 7.774 11.260 7.612 11.367 C 7.372 11.526,7.267 11.721,7.267 12.007 C 7.267 12.203,7.286 12.270,7.383 12.408 C 7.447 12.499,7.572 12.610,7.660 12.656 C 7.814 12.737,7.886 12.740,9.528 12.752 L 11.236 12.764 11.248 14.492 L 11.260 16.220 11.353 16.369 C 11.710 16.943,12.576 16.812,12.716 16.162 C 12.744 16.031,12.760 15.374,12.760 14.358 L 12.760 12.760 14.358 12.760 C 15.374 12.760,16.031 12.744,16.162 12.716 C 16.904 12.557,16.924 11.471,16.189 11.286 C 16.064 11.255,15.479 11.240,14.382 11.240 L 12.760 11.240 12.759 9.630 C 12.758 8.669,12.741 7.948,12.717 7.841 C 12.623 7.432,12.215 7.177,11.815 7.277 "
|
|
440
|
+
stroke="none"
|
|
441
|
+
fill-rule="evenodd"
|
|
442
|
+
fill="var(--mecx-color-gray-900)"
|
|
443
|
+
></path>
|
|
444
|
+
</svg>
|
|
445
|
+
}
|
|
354
446
|
}
|
|
355
|
-
|
|
356
|
-
}]
|
|
447
|
+
`, styles: [":host{display:flex}\n"] }]
|
|
357
448
|
}] });
|
|
358
449
|
|
|
359
450
|
/** ************************
|
|
@@ -527,7 +618,7 @@ class MonkeyIconComponent {
|
|
|
527
618
|
}
|
|
528
619
|
}
|
|
529
620
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
530
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
621
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
531
622
|
}
|
|
532
623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyIconComponent, decorators: [{
|
|
533
624
|
type: Component,
|
|
@@ -535,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
535
626
|
'[class]': `_icon+' '+size`,
|
|
536
627
|
'[attr.id]': 'id',
|
|
537
628
|
'[id]': 'id'
|
|
538
|
-
}, styles: ["monkey-icon{display:inline-flex}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"] }]
|
|
629
|
+
}, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"] }]
|
|
539
630
|
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
540
631
|
type: Input
|
|
541
632
|
}], size: [{
|
|
@@ -583,7 +674,7 @@ class MonkeyAlertComponent {
|
|
|
583
674
|
return typeIcons[type];
|
|
584
675
|
}
|
|
585
676
|
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: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-
|
|
677
|
+
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-fs-sm);font-weight:var(--mecx-fw-regular);letter-spacing:.54px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
587
678
|
}
|
|
588
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
589
680
|
type: Component,
|
|
@@ -591,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
591
682
|
'data-testid': 'monkey-alert',
|
|
592
683
|
'[attr.id]': 'id',
|
|
593
684
|
'[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: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-
|
|
685
|
+
}, 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-fs-sm);font-weight:var(--mecx-fw-regular);letter-spacing:.54px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.42px;line-height:var(--mecx-lh-24);text-decoration:underline}\n"] }]
|
|
595
686
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
596
687
|
type: Input
|
|
597
688
|
}] } });
|
|
@@ -822,15 +913,15 @@ class MonkeyButtonComponent {
|
|
|
822
913
|
return this.elementRef.nativeElement;
|
|
823
914
|
}
|
|
824
915
|
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: "
|
|
916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", 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 || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\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) util-icon svg path{fill: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) util-icon svg path{fill: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) util-icon svg path{fill: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-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.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)}.mecx-button-loading{display:flex}.mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
826
917
|
}
|
|
827
918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
828
919
|
type: Component,
|
|
829
|
-
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-button', standalone: true, host: {
|
|
920
|
+
args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent, CommonModule], selector: 'monkey-button', standalone: true, host: {
|
|
830
921
|
'data-testid': 'monkey-button',
|
|
831
922
|
'[attr.id]': 'id',
|
|
832
923
|
'[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: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"] }]
|
|
924
|
+
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\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) util-icon svg path{fill: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) util-icon svg path{fill: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) util-icon svg path{fill: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-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.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)}.mecx-button-loading{display:flex}.mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
834
925
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
835
926
|
type: Input
|
|
836
927
|
}], color: [{
|
|
@@ -839,6 +930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
839
930
|
type: Input
|
|
840
931
|
}], type: [{
|
|
841
932
|
type: Input
|
|
933
|
+
}], loading: [{
|
|
934
|
+
type: Input
|
|
842
935
|
}], id: [{
|
|
843
936
|
type: Input
|
|
844
937
|
}], onClick: [{
|
|
@@ -1129,7 +1222,9 @@ class MonkeyPopoverDirective {
|
|
|
1129
1222
|
}
|
|
1130
1223
|
this._show = show;
|
|
1131
1224
|
if (show) {
|
|
1132
|
-
|
|
1225
|
+
setTimeout(() => {
|
|
1226
|
+
this.createPopover();
|
|
1227
|
+
}, 0);
|
|
1133
1228
|
}
|
|
1134
1229
|
else {
|
|
1135
1230
|
this.disposePopover();
|
|
@@ -1519,8 +1614,10 @@ class MonkeyCheckboxComponent {
|
|
|
1519
1614
|
this._onTouched();
|
|
1520
1615
|
this.isFocused = false;
|
|
1521
1616
|
};
|
|
1522
|
-
this.onFocus = () => {
|
|
1523
|
-
|
|
1617
|
+
this.onFocus = (event) => {
|
|
1618
|
+
if (event.relatedTarget) {
|
|
1619
|
+
this.isFocused = true;
|
|
1620
|
+
}
|
|
1524
1621
|
};
|
|
1525
1622
|
}
|
|
1526
1623
|
get showInvalid() {
|
|
@@ -1610,7 +1707,7 @@ class MonkeyCheckboxComponent {
|
|
|
1610
1707
|
useExisting: MonkeyCheckboxComponent,
|
|
1611
1708
|
multi: true
|
|
1612
1709
|
}
|
|
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: [
|
|
1710
|
+
], 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($event)\"\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
1711
|
trigger('iconAnimation', [
|
|
1615
1712
|
transition(':enter', [
|
|
1616
1713
|
animate('250ms ease-in-out', keyframes([
|
|
@@ -1670,7 +1767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1670
1767
|
'[class.sm]': 'size.includes("sm")',
|
|
1671
1768
|
'[class.md]': 'size.includes("md")',
|
|
1672
1769
|
'[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: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"] }]
|
|
1770
|
+
}, 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($event)\"\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
1771
|
}], propDecorators: { infoChildren: [{
|
|
1675
1772
|
type: ContentChildren,
|
|
1676
1773
|
args: [MonkeyInfoDirective, { descendants: true }]
|
|
@@ -2163,7 +2260,7 @@ class MonkeyFormFieldComponent {
|
|
|
2163
2260
|
}
|
|
2164
2261
|
}
|
|
2165
2262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n@if (showFooter) {\n <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{
|
|
2263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n@if (showFooter) {\n <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2167
2264
|
}
|
|
2168
2265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2169
2266
|
type: Component,
|
|
@@ -2176,7 +2273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2176
2273
|
'[attr.id]': 'id',
|
|
2177
2274
|
'[id]': 'id',
|
|
2178
2275
|
'[class]': 'size'
|
|
2179
|
-
}, standalone: false, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n@if (showFooter) {\n <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{
|
|
2276
|
+
}, standalone: false, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n@if (showFooter) {\n <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
|
|
2180
2277
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2181
2278
|
type: Input
|
|
2182
2279
|
}], hideAction: [{
|
|
@@ -2665,15 +2762,15 @@ class MonkeyIconButtonComponent {
|
|
|
2665
2762
|
}
|
|
2666
2763
|
}
|
|
2667
2764
|
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: "
|
|
2765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", loading: "loading", 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 || loading\">\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n <monkey-icon *ngIf=\"!loading\" name=\"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-visible{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)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}: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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2669
2766
|
}
|
|
2670
2767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
|
|
2671
2768
|
type: Component,
|
|
2672
|
-
args: [{ selector: 'monkey-icon-button', imports: [CommonModule, MonkeyIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
2769
|
+
args: [{ selector: 'monkey-icon-button', imports: [CommonModule, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
2673
2770
|
'data-testid': 'monkey-icon-button',
|
|
2674
2771
|
'[attr.id]': 'id',
|
|
2675
2772
|
'[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: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"] }]
|
|
2773
|
+
}, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n <monkey-icon *ngIf=\"!loading\" name=\"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-visible{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)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
2677
2774
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
2678
2775
|
type: Input
|
|
2679
2776
|
}], size: [{
|
|
@@ -2682,6 +2779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2682
2779
|
type: Input
|
|
2683
2780
|
}], icon: [{
|
|
2684
2781
|
type: Input
|
|
2782
|
+
}], loading: [{
|
|
2783
|
+
type: Input
|
|
2685
2784
|
}], id: [{
|
|
2686
2785
|
type: Input
|
|
2687
2786
|
}], onClick: [{
|
|
@@ -2898,7 +2997,7 @@ class MonkeyDateRangeMonthComponent {
|
|
|
2898
2997
|
});
|
|
2899
2998
|
}
|
|
2900
2999
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2901
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n <div class=\"header\">\n @if (!hidePrevious) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-left\"\n type=\"secondary\"\n class=\"previous\"\n [disabled]=\"daysInMonth.blockPrev\"\n (click)=\"onNavigate.next('previous')\"\n >\n </monkey-icon-button>\n }\n\n {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n @if (!hideNext) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-right\"\n type=\"secondary\"\n class=\"next\"\n [disabled]=\"daysInMonth.blockNext\"\n (click)=\"onNavigate.next('next')\"\n >\n </monkey-icon-button>\n }\n </div>\n\n <div class=\"week-labels\">\n @for (day of i18n?.['WEEK-DAYS']; track day) {\n <span class=\"day\">{{ day }}</span>\n }\n </div>\n\n <div class=\"dates\">\n @for (day of daysInMonth.days; track $index) {\n <div\n class=\"day\"\n [class.disabled]=\"day!.isDisabled\"\n [class.in-range]=\"isInRange(day!)\"\n [class.selected]=\"isSelected(day!)\"\n [class.first]=\"isFirst(day!)\"\n [class.last]=\"isLast(day!)\"\n [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n [class.temporary-last]=\"isInLastTemporary(day!)\"\n (click)=\"onSelectDate($event, day!)\"\n (mouseenter)=\"temporaryEndDate = day!\"\n (mouseleave)=\"temporaryEndDate = null\"\n >\n {{ day!.date | date: 'd' }}\n @if (day?.isToday) {\n <span class=\"today\"></span>\n }\n </div>\n }\n </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }] }); }
|
|
3000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n <div class=\"header\">\n @if (!hidePrevious) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-left\"\n type=\"secondary\"\n class=\"previous\"\n [disabled]=\"daysInMonth.blockPrev\"\n (click)=\"onNavigate.next('previous')\"\n >\n </monkey-icon-button>\n }\n\n {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n @if (!hideNext) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-right\"\n type=\"secondary\"\n class=\"next\"\n [disabled]=\"daysInMonth.blockNext\"\n (click)=\"onNavigate.next('next')\"\n >\n </monkey-icon-button>\n }\n </div>\n\n <div class=\"week-labels\">\n @for (day of i18n?.['WEEK-DAYS']; track day) {\n <span class=\"day\">{{ day }}</span>\n }\n </div>\n\n <div class=\"dates\">\n @for (day of daysInMonth.days; track $index) {\n <div\n class=\"day\"\n [class.disabled]=\"day!.isDisabled\"\n [class.in-range]=\"isInRange(day!)\"\n [class.selected]=\"isSelected(day!)\"\n [class.first]=\"isFirst(day!)\"\n [class.last]=\"isLast(day!)\"\n [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n [class.temporary-last]=\"isInLastTemporary(day!)\"\n (click)=\"onSelectDate($event, day!)\"\n (mouseenter)=\"temporaryEndDate = day!\"\n (mouseleave)=\"temporaryEndDate = null\"\n >\n {{ day!.date | date: 'd' }}\n @if (day?.isToday) {\n <span class=\"today\"></span>\n }\n </div>\n }\n </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }] }); }
|
|
2902
3001
|
}
|
|
2903
3002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
|
|
2904
3003
|
type: Component,
|
|
@@ -3162,7 +3261,7 @@ class MonkeyDateRangeComponent {
|
|
|
3162
3261
|
this.secondCalendar = calendars.secondCalendar;
|
|
3163
3262
|
}
|
|
3164
3263
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n <div class=\"container-date-range-group\">\n @if (!hideQuickAction) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n }\n\n <div class=\"container-date-range\">\n @if (!hideHeader) {\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n @if (allowFastActionOnHeader) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n } @else {\n <div class=\"inputs\">\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"startDate\"\n [(ngModel)]=\"handledStartDate\"\n (ngModelChange)=\"onDataChange($event, true)\"\n [min]=\"handledMinDate\"\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n (change)=\"onChangeInputStartDate($event)\"\n />\n </monkey-form-field>\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"endDate\"\n [(ngModel)]=\"handledEndDate\"\n (ngModelChange)=\"onDataChange($event, false)\"\n [min]=\"handledStartDate ? handledStartDate : ''\"\n [max]=\"handledMaxDate\"\n (change)=\"onChangeInputEndDate($event)\"\n />\n </monkey-form-field>\n </div>\n @if (isInvalidInterval) {\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n }\n }\n </div>\n }\n\n <div class=\"body\">\n <div class=\"calendars\">\n <monkey-date-range-month\n [month]=\"firstCalendar.month\"\n [year]=\"firstCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n [hideNext]=\"!hideSecondCalendar\"\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n\n @if (!hideSecondCalendar) {\n <monkey-date-range-month\n [month]=\"secondCalendar.month\"\n [year]=\"secondCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n hidePrevious\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n }\n </div>\n </div>\n\n @if (!hideActions) {\n <div class=\"actions\">\n <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"md\"\n (click)=\"onSubmit()\"\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n >\n {{ i18n?.ACTIONS?.APPLY }}\n </monkey-button>\n </div>\n }\n </div>\n </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }] }); }
|
|
3264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n <div class=\"container-date-range-group\">\n @if (!hideQuickAction) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n }\n\n <div class=\"container-date-range\">\n @if (!hideHeader) {\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n @if (allowFastActionOnHeader) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n } @else {\n <div class=\"inputs\">\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"startDate\"\n [(ngModel)]=\"handledStartDate\"\n (ngModelChange)=\"onDataChange($event, true)\"\n [min]=\"handledMinDate\"\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n (change)=\"onChangeInputStartDate($event)\"\n />\n </monkey-form-field>\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"endDate\"\n [(ngModel)]=\"handledEndDate\"\n (ngModelChange)=\"onDataChange($event, false)\"\n [min]=\"handledStartDate ? handledStartDate : ''\"\n [max]=\"handledMaxDate\"\n (change)=\"onChangeInputEndDate($event)\"\n />\n </monkey-form-field>\n </div>\n @if (isInvalidInterval) {\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n }\n }\n </div>\n }\n\n <div class=\"body\">\n <div class=\"calendars\">\n <monkey-date-range-month\n [month]=\"firstCalendar.month\"\n [year]=\"firstCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n [hideNext]=\"!hideSecondCalendar\"\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n\n @if (!hideSecondCalendar) {\n <monkey-date-range-month\n [month]=\"secondCalendar.month\"\n [year]=\"secondCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n hidePrevious\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n }\n </div>\n </div>\n\n @if (!hideActions) {\n <div class=\"actions\">\n <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"md\"\n (click)=\"onSubmit()\"\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n >\n {{ i18n?.ACTIONS?.APPLY }}\n </monkey-button>\n </div>\n }\n </div>\n </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }] }); }
|
|
3166
3265
|
}
|
|
3167
3266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
3168
3267
|
type: Component,
|
|
@@ -3267,6 +3366,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3267
3366
|
* MIT Licence
|
|
3268
3367
|
************************* */
|
|
3269
3368
|
|
|
3369
|
+
/** ************************
|
|
3370
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3371
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3372
|
+
* MIT Licence
|
|
3373
|
+
************************* */
|
|
3374
|
+
class MonkeyOptionComponent {
|
|
3375
|
+
constructor() {
|
|
3376
|
+
this.idGenerator = inject(IdGenerator);
|
|
3377
|
+
this.value = input();
|
|
3378
|
+
this.disabled = false;
|
|
3379
|
+
this.type = 'select';
|
|
3380
|
+
this.selected = false;
|
|
3381
|
+
this.tabIndex = 0;
|
|
3382
|
+
this.id = this.idGenerator.getId('mecx-option-');
|
|
3383
|
+
}
|
|
3384
|
+
get displayContent() {
|
|
3385
|
+
return (this._content?.nativeElement.textContent || '').trim();
|
|
3386
|
+
}
|
|
3387
|
+
handleAction(event) {
|
|
3388
|
+
if (this.disabled) {
|
|
3389
|
+
event.stopPropagation();
|
|
3390
|
+
event.preventDefault();
|
|
3391
|
+
}
|
|
3392
|
+
else {
|
|
3393
|
+
this.action?.();
|
|
3394
|
+
}
|
|
3395
|
+
}
|
|
3396
|
+
onClick(event) {
|
|
3397
|
+
this.handleAction(event);
|
|
3398
|
+
}
|
|
3399
|
+
handleKeyDown(event) {
|
|
3400
|
+
const { key } = event;
|
|
3401
|
+
if (key === 'Enter' || key === ' ') {
|
|
3402
|
+
this.handleAction(event);
|
|
3403
|
+
}
|
|
3404
|
+
}
|
|
3405
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
3407
|
+
@if (type === 'checkbox') {
|
|
3408
|
+
<span class="mecx-option-checkbox">
|
|
3409
|
+
<util-icon class="icon" name="check" />
|
|
3410
|
+
</span>
|
|
3411
|
+
}
|
|
3412
|
+
<div #content><ng-content /></div>
|
|
3413
|
+
`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3414
|
+
}
|
|
3415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
3416
|
+
type: Component,
|
|
3417
|
+
args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
|
|
3418
|
+
@if (type === 'checkbox') {
|
|
3419
|
+
<span class="mecx-option-checkbox">
|
|
3420
|
+
<util-icon class="icon" name="check" />
|
|
3421
|
+
</span>
|
|
3422
|
+
}
|
|
3423
|
+
<div #content><ng-content /></div>
|
|
3424
|
+
`, encapsulation: ViewEncapsulation.None, host: {
|
|
3425
|
+
'data-testid': 'monkey-option',
|
|
3426
|
+
'[attr.id]': 'id',
|
|
3427
|
+
class: 'mecx-option',
|
|
3428
|
+
'[class.mecx-option-disabled]': 'disabled',
|
|
3429
|
+
'[class.mecx-option-selected]': 'selected',
|
|
3430
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3431
|
+
'[class]': 'type'
|
|
3432
|
+
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
|
|
3433
|
+
}], propDecorators: { _content: [{
|
|
3434
|
+
type: ViewChild,
|
|
3435
|
+
args: ['content', { static: true }]
|
|
3436
|
+
}], disabled: [{
|
|
3437
|
+
type: Input,
|
|
3438
|
+
args: [{ transform: booleanAttribute }]
|
|
3439
|
+
}], type: [{
|
|
3440
|
+
type: Input
|
|
3441
|
+
}], onClick: [{
|
|
3442
|
+
type: HostListener,
|
|
3443
|
+
args: ['click', ['$event']]
|
|
3444
|
+
}], handleKeyDown: [{
|
|
3445
|
+
type: HostListener,
|
|
3446
|
+
args: ['keydown', ['$event']]
|
|
3447
|
+
}] } });
|
|
3448
|
+
|
|
3449
|
+
/** ************************
|
|
3450
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3451
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3452
|
+
* MIT Licence
|
|
3453
|
+
************************* */
|
|
3454
|
+
|
|
3455
|
+
/** ************************
|
|
3456
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3457
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3458
|
+
* MIT Licence
|
|
3459
|
+
************************* */
|
|
3460
|
+
class MonkeyFilterBarComponent {
|
|
3461
|
+
constructor() {
|
|
3462
|
+
this._elementRef = inject(ElementRef);
|
|
3463
|
+
this.showPopOver = false;
|
|
3464
|
+
this.elementTarget = null;
|
|
3465
|
+
this.closePopOver = () => {
|
|
3466
|
+
this.showPopOver = false;
|
|
3467
|
+
};
|
|
3468
|
+
}
|
|
3469
|
+
ngAfterContentInit() { }
|
|
3470
|
+
ngOnChanges(changes) { }
|
|
3471
|
+
ngOnDestroy() { }
|
|
3472
|
+
onShowPopOver(el) {
|
|
3473
|
+
this.elementTarget = el.element;
|
|
3474
|
+
this.showPopOver = true;
|
|
3475
|
+
}
|
|
3476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar'", "class.mecx-filter-bar-disabled": "_disabled", "class.mecx-filter-bar-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
3478
|
+
<monkey-form-field>
|
|
3479
|
+
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
3480
|
+
</monkey-form-field>
|
|
3481
|
+
<monkey-button
|
|
3482
|
+
#popoverTarget
|
|
3483
|
+
class="btn-filter"
|
|
3484
|
+
type="secondary"
|
|
3485
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
3486
|
+
>
|
|
3487
|
+
<util-icon class="icon" name="addPlus" first />
|
|
3488
|
+
Adicionar Filtro
|
|
3489
|
+
</monkey-button>
|
|
3490
|
+
|
|
3491
|
+
<ng-template
|
|
3492
|
+
[monkeyPopover]="showPopOver"
|
|
3493
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
3494
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3495
|
+
monkeyPopoverDir="ltr"
|
|
3496
|
+
[monkeyPopoverHideHeader]="true"
|
|
3497
|
+
>
|
|
3498
|
+
<monkey-option> Status </monkey-option>
|
|
3499
|
+
<monkey-option> Data de Emissão </monkey-option>
|
|
3500
|
+
<monkey-option> Data de Vencimento </monkey-option>
|
|
3501
|
+
</ng-template>
|
|
3502
|
+
`, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }] }); }
|
|
3503
|
+
}
|
|
3504
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
3505
|
+
type: Component,
|
|
3506
|
+
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
3507
|
+
CommonModule,
|
|
3508
|
+
FormsModule,
|
|
3509
|
+
ReactiveFormsModule,
|
|
3510
|
+
MonkeyFormFieldModule,
|
|
3511
|
+
MonkeyDirectivesModule,
|
|
3512
|
+
MonkeyFormFieldModule,
|
|
3513
|
+
MonkeyInputModule,
|
|
3514
|
+
MonkeyButtonComponent,
|
|
3515
|
+
UtilIconComponent,
|
|
3516
|
+
MonkeyOptionComponent
|
|
3517
|
+
], template: `
|
|
3518
|
+
<monkey-form-field>
|
|
3519
|
+
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
3520
|
+
</monkey-form-field>
|
|
3521
|
+
<monkey-button
|
|
3522
|
+
#popoverTarget
|
|
3523
|
+
class="btn-filter"
|
|
3524
|
+
type="secondary"
|
|
3525
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
3526
|
+
>
|
|
3527
|
+
<util-icon class="icon" name="addPlus" first />
|
|
3528
|
+
Adicionar Filtro
|
|
3529
|
+
</monkey-button>
|
|
3530
|
+
|
|
3531
|
+
<ng-template
|
|
3532
|
+
[monkeyPopover]="showPopOver"
|
|
3533
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
3534
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3535
|
+
monkeyPopoverDir="ltr"
|
|
3536
|
+
[monkeyPopoverHideHeader]="true"
|
|
3537
|
+
>
|
|
3538
|
+
<monkey-option> Status </monkey-option>
|
|
3539
|
+
<monkey-option> Data de Emissão </monkey-option>
|
|
3540
|
+
<monkey-option> Data de Vencimento </monkey-option>
|
|
3541
|
+
</ng-template>
|
|
3542
|
+
`, host: {
|
|
3543
|
+
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
3544
|
+
class: 'mecx-filter-bar',
|
|
3545
|
+
'[class.mecx-filter-bar-disabled]': '_disabled',
|
|
3546
|
+
'[class.mecx-filter-bar-focused]': 'focused',
|
|
3547
|
+
'[attr.id]': 'id',
|
|
3548
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3549
|
+
'(focus)': '_onFocus()',
|
|
3550
|
+
'(blur)': '_onBlur()'
|
|
3551
|
+
}, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"] }]
|
|
3552
|
+
}] });
|
|
3553
|
+
|
|
3554
|
+
/** ************************
|
|
3555
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3556
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3557
|
+
* MIT Licence
|
|
3558
|
+
************************* */
|
|
3559
|
+
|
|
3270
3560
|
/** ************************
|
|
3271
3561
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
3272
3562
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -3761,98 +4051,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3761
4051
|
* This style guide was developed by Monkey Exchange Team
|
|
3762
4052
|
* MIT Licence
|
|
3763
4053
|
************************* */
|
|
3764
|
-
class
|
|
3765
|
-
|
|
3766
|
-
this.
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
this.
|
|
3770
|
-
this.selected = false;
|
|
3771
|
-
this.tabIndex = 0;
|
|
3772
|
-
this.id = this.idGenerator.getId('mecx-option-');
|
|
3773
|
-
}
|
|
3774
|
-
get displayContent() {
|
|
3775
|
-
return (this._content?.nativeElement.textContent || '').trim();
|
|
3776
|
-
}
|
|
3777
|
-
handleAction(event) {
|
|
3778
|
-
if (this.disabled) {
|
|
3779
|
-
event.stopPropagation();
|
|
3780
|
-
event.preventDefault();
|
|
3781
|
-
}
|
|
3782
|
-
else {
|
|
3783
|
-
this.action?.();
|
|
3784
|
-
}
|
|
3785
|
-
}
|
|
3786
|
-
onClick(event) {
|
|
3787
|
-
this.handleAction(event);
|
|
3788
|
-
}
|
|
3789
|
-
handleKeyDown(event) {
|
|
3790
|
-
const { key } = event;
|
|
3791
|
-
if (key === 'Enter' || key === ' ') {
|
|
3792
|
-
this.handleAction(event);
|
|
3793
|
-
}
|
|
3794
|
-
}
|
|
3795
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
3797
|
-
@if (type === 'checkbox') {
|
|
3798
|
-
<span class="mecx-option-checkbox">
|
|
3799
|
-
<util-icon class="icon" name="check" />
|
|
3800
|
-
</span>
|
|
3801
|
-
}
|
|
3802
|
-
<div #content><ng-content /></div>
|
|
3803
|
-
`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3804
|
-
}
|
|
3805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
3806
|
-
type: Component,
|
|
3807
|
-
args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
|
|
3808
|
-
@if (type === 'checkbox') {
|
|
3809
|
-
<span class="mecx-option-checkbox">
|
|
3810
|
-
<util-icon class="icon" name="check" />
|
|
3811
|
-
</span>
|
|
3812
|
-
}
|
|
3813
|
-
<div #content><ng-content /></div>
|
|
3814
|
-
`, encapsulation: ViewEncapsulation.None, host: {
|
|
3815
|
-
'data-testid': 'monkey-option',
|
|
3816
|
-
'[attr.id]': 'id',
|
|
3817
|
-
class: 'mecx-option',
|
|
3818
|
-
'[class.mecx-option-disabled]': 'disabled',
|
|
3819
|
-
'[class.mecx-option-selected]': 'selected',
|
|
3820
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3821
|
-
'[class]': 'type'
|
|
3822
|
-
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
|
|
3823
|
-
}], propDecorators: { _content: [{
|
|
3824
|
-
type: ViewChild,
|
|
3825
|
-
args: ['content', { static: true }]
|
|
3826
|
-
}], disabled: [{
|
|
3827
|
-
type: Input,
|
|
3828
|
-
args: [{ transform: booleanAttribute }]
|
|
3829
|
-
}], type: [{
|
|
3830
|
-
type: Input
|
|
3831
|
-
}], onClick: [{
|
|
3832
|
-
type: HostListener,
|
|
3833
|
-
args: ['click', ['$event']]
|
|
3834
|
-
}], handleKeyDown: [{
|
|
3835
|
-
type: HostListener,
|
|
3836
|
-
args: ['keydown', ['$event']]
|
|
3837
|
-
}] } });
|
|
3838
|
-
|
|
3839
|
-
/** ************************
|
|
3840
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
3841
|
-
* This style guide was developed by Monkey Exchange Team
|
|
3842
|
-
* MIT Licence
|
|
3843
|
-
************************* */
|
|
3844
|
-
|
|
3845
|
-
/** ************************
|
|
3846
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
3847
|
-
* This style guide was developed by Monkey Exchange Team
|
|
3848
|
-
* MIT Licence
|
|
3849
|
-
************************* */
|
|
3850
|
-
class MonkeySelectComponent {
|
|
3851
|
-
get disabled() {
|
|
3852
|
-
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
3853
|
-
return this.ngControl.disabled;
|
|
3854
|
-
}
|
|
3855
|
-
return this._disabled;
|
|
4054
|
+
class MonkeySelectComponent {
|
|
4055
|
+
get disabled() {
|
|
4056
|
+
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
4057
|
+
return this.ngControl.disabled;
|
|
4058
|
+
}
|
|
4059
|
+
return this._disabled;
|
|
3856
4060
|
}
|
|
3857
4061
|
set disabled(value) {
|
|
3858
4062
|
this._disabled = value;
|
|
@@ -5103,7 +5307,7 @@ class MonkeyModalComponent {
|
|
|
5103
5307
|
<ng-content select="[monkey-modal-content]"></ng-content>
|
|
5104
5308
|
<ng-content select="monkey-modal-actions"></ng-content>
|
|
5105
5309
|
<ng-content select="[monkey-modal-actions]"></ng-content>
|
|
5106
|
-
`, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5310
|
+
`, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5107
5311
|
}
|
|
5108
5312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalComponent, decorators: [{
|
|
5109
5313
|
type: Component,
|
|
@@ -5200,7 +5404,7 @@ class MonkeyModalDefaultComponent {
|
|
|
5200
5404
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
5201
5405
|
</monkey-modal-actions>
|
|
5202
5406
|
</monkey-modal>
|
|
5203
|
-
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
|
|
5407
|
+
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
|
|
5204
5408
|
}
|
|
5205
5409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
|
|
5206
5410
|
type: Component,
|
|
@@ -5261,7 +5465,7 @@ class MonkeyModalConfirmationComponent {
|
|
|
5261
5465
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
5262
5466
|
</monkey-modal-actions>
|
|
5263
5467
|
</monkey-modal>
|
|
5264
|
-
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\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: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5468
|
+
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5265
5469
|
}
|
|
5266
5470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
|
|
5267
5471
|
type: Component,
|
|
@@ -5308,7 +5512,7 @@ class MonkeyModalModule {
|
|
|
5308
5512
|
MonkeyModalSubtitleDirective,
|
|
5309
5513
|
MonkeyModalContentDirective,
|
|
5310
5514
|
MonkeyModalActionsDirective] }); }
|
|
5311
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
|
|
5515
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
|
|
5312
5516
|
}
|
|
5313
5517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyModalModule, decorators: [{
|
|
5314
5518
|
type: NgModule,
|
|
@@ -5789,7 +5993,7 @@ class MonkeyPaginationActionComponent {
|
|
|
5789
5993
|
this.id = this.id;
|
|
5790
5994
|
}
|
|
5791
5995
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('prev')\"\n [disabled]=\"disabled || !prev\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n\n<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('next')\"\n [disabled]=\"disabled || !next\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5996
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('prev')\"\n [disabled]=\"disabled || !prev\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n\n<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('next')\"\n [disabled]=\"disabled || !next\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5793
5997
|
}
|
|
5794
5998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
|
|
5795
5999
|
type: Component,
|
|
@@ -6397,6 +6601,7 @@ class MonkeyTableModule {
|
|
|
6397
6601
|
MonkeyColumnSortable,
|
|
6398
6602
|
MonkeyColumnExpansible] }); }
|
|
6399
6603
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
|
|
6604
|
+
MonkeyButtonComponent,
|
|
6400
6605
|
MonkeyPaginationSizeComponent,
|
|
6401
6606
|
MonkeyPaginationActionComponent] }); }
|
|
6402
6607
|
}
|
|
@@ -6469,7 +6674,7 @@ class MonkeyToastComponent {
|
|
|
6469
6674
|
}
|
|
6470
6675
|
}
|
|
6471
6676
|
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 }); }
|
|
6472
|
-
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-
|
|
6677
|
+
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-lh-24);font-size:var(--mecx-fs-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", "loading", "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 }); }
|
|
6473
6678
|
}
|
|
6474
6679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyToastComponent, decorators: [{
|
|
6475
6680
|
type: Component,
|
|
@@ -6478,7 +6683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6478
6683
|
'(animationend)': 'onAnimationEnd($event)',
|
|
6479
6684
|
'[attr.id]': 'id',
|
|
6480
6685
|
'[id]': 'id'
|
|
6481
|
-
}, 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-
|
|
6686
|
+
}, 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-lh-24);font-size:var(--mecx-fs-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"] }]
|
|
6482
6687
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
|
|
6483
6688
|
type: Input
|
|
6484
6689
|
}], icon: [{
|
|
@@ -6951,6 +7156,527 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6951
7156
|
* MIT Licence
|
|
6952
7157
|
************************* */
|
|
6953
7158
|
|
|
7159
|
+
/** ************************
|
|
7160
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7161
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7162
|
+
* MIT Licence
|
|
7163
|
+
************************* */
|
|
7164
|
+
class MonkeyStepComponent {
|
|
7165
|
+
constructor() {
|
|
7166
|
+
this.id = inject(IdGenerator).getId('monkey-step-');
|
|
7167
|
+
this.label = '';
|
|
7168
|
+
this.step = '';
|
|
7169
|
+
this.icon = '';
|
|
7170
|
+
this.number = undefined;
|
|
7171
|
+
this.hasSubSteps = true;
|
|
7172
|
+
this.isSubStep = false;
|
|
7173
|
+
this.isCurrent = false;
|
|
7174
|
+
this.isComplete = false;
|
|
7175
|
+
this.isActive = false;
|
|
7176
|
+
}
|
|
7177
|
+
ngAfterContentInit() {
|
|
7178
|
+
if (this.subSteps.length <= 0) {
|
|
7179
|
+
this.hasSubSteps = false;
|
|
7180
|
+
}
|
|
7181
|
+
}
|
|
7182
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7183
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyStepComponent, isStandalone: false, selector: "monkey-step", inputs: { label: "label", step: "step", icon: "icon" }, host: { attributes: { "data-testid": "monkey-step" }, properties: { "attr.id": "id", "id": "id" } }, queries: [{ propertyName: "subSteps", predicate: MonkeyStepComponent }], ngImport: i0, template: `
|
|
7184
|
+
<div
|
|
7185
|
+
class="item"
|
|
7186
|
+
[class.active]="isActive"
|
|
7187
|
+
[class.complete]="isComplete"
|
|
7188
|
+
[class.current]="isCurrent"
|
|
7189
|
+
[class.substep]="isSubStep"
|
|
7190
|
+
>
|
|
7191
|
+
<div class="step">
|
|
7192
|
+
<div class="number" [class.icon]="!!icon">
|
|
7193
|
+
@if (icon) {
|
|
7194
|
+
<monkey-icon size="sm" [icon]="icon" />
|
|
7195
|
+
} @else if (isComplete) {
|
|
7196
|
+
<util-icon name="check" />
|
|
7197
|
+
} @else {
|
|
7198
|
+
{{ number }}
|
|
7199
|
+
}
|
|
7200
|
+
</div>
|
|
7201
|
+
</div>
|
|
7202
|
+
<div class="label">
|
|
7203
|
+
<div>{{ label }}</div>
|
|
7204
|
+
@if (isCurrent) {
|
|
7205
|
+
<div class="current-icon">
|
|
7206
|
+
<monkey-icon icon="arrow-line-right" size="sm" />
|
|
7207
|
+
</div>
|
|
7208
|
+
}
|
|
7209
|
+
</div>
|
|
7210
|
+
</div>
|
|
7211
|
+
@if (hasSubSteps && (isActive || isCurrent)) {
|
|
7212
|
+
<div class="substeps">
|
|
7213
|
+
<ng-content />
|
|
7214
|
+
</div>
|
|
7215
|
+
}
|
|
7216
|
+
`, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media (max-width: 575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon monkey-icon{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number monkey-icon{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
|
|
7217
|
+
}
|
|
7218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepComponent, decorators: [{
|
|
7219
|
+
type: Component,
|
|
7220
|
+
args: [{ selector: 'monkey-step', standalone: false, template: `
|
|
7221
|
+
<div
|
|
7222
|
+
class="item"
|
|
7223
|
+
[class.active]="isActive"
|
|
7224
|
+
[class.complete]="isComplete"
|
|
7225
|
+
[class.current]="isCurrent"
|
|
7226
|
+
[class.substep]="isSubStep"
|
|
7227
|
+
>
|
|
7228
|
+
<div class="step">
|
|
7229
|
+
<div class="number" [class.icon]="!!icon">
|
|
7230
|
+
@if (icon) {
|
|
7231
|
+
<monkey-icon size="sm" [icon]="icon" />
|
|
7232
|
+
} @else if (isComplete) {
|
|
7233
|
+
<util-icon name="check" />
|
|
7234
|
+
} @else {
|
|
7235
|
+
{{ number }}
|
|
7236
|
+
}
|
|
7237
|
+
</div>
|
|
7238
|
+
</div>
|
|
7239
|
+
<div class="label">
|
|
7240
|
+
<div>{{ label }}</div>
|
|
7241
|
+
@if (isCurrent) {
|
|
7242
|
+
<div class="current-icon">
|
|
7243
|
+
<monkey-icon icon="arrow-line-right" size="sm" />
|
|
7244
|
+
</div>
|
|
7245
|
+
}
|
|
7246
|
+
</div>
|
|
7247
|
+
</div>
|
|
7248
|
+
@if (hasSubSteps && (isActive || isCurrent)) {
|
|
7249
|
+
<div class="substeps">
|
|
7250
|
+
<ng-content />
|
|
7251
|
+
</div>
|
|
7252
|
+
}
|
|
7253
|
+
`, host: {
|
|
7254
|
+
'data-testid': 'monkey-step',
|
|
7255
|
+
'[attr.id]': 'id',
|
|
7256
|
+
'[id]': 'id'
|
|
7257
|
+
}, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media (max-width: 575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon monkey-icon{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number monkey-icon{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
7258
|
+
}], propDecorators: { subSteps: [{
|
|
7259
|
+
type: ContentChildren,
|
|
7260
|
+
args: [MonkeyStepComponent]
|
|
7261
|
+
}], label: [{
|
|
7262
|
+
type: Input
|
|
7263
|
+
}], step: [{
|
|
7264
|
+
type: Input
|
|
7265
|
+
}], icon: [{
|
|
7266
|
+
type: Input
|
|
7267
|
+
}] } });
|
|
7268
|
+
|
|
7269
|
+
/** ************************
|
|
7270
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7271
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7272
|
+
* MIT Licence
|
|
7273
|
+
************************* */
|
|
7274
|
+
class MonkeyStepperComponent {
|
|
7275
|
+
constructor() {
|
|
7276
|
+
this.monkeyId = inject(IdGenerator).getId('monkey-stepper-');
|
|
7277
|
+
this.direction = 'vertical';
|
|
7278
|
+
this._id = '';
|
|
7279
|
+
this.currentStep = '';
|
|
7280
|
+
}
|
|
7281
|
+
set id(value) {
|
|
7282
|
+
this._id = value;
|
|
7283
|
+
}
|
|
7284
|
+
get id() {
|
|
7285
|
+
return this._id;
|
|
7286
|
+
}
|
|
7287
|
+
ngAfterContentInit() {
|
|
7288
|
+
this.render();
|
|
7289
|
+
}
|
|
7290
|
+
ngOnChanges() {
|
|
7291
|
+
if (this.steps) {
|
|
7292
|
+
this.render();
|
|
7293
|
+
}
|
|
7294
|
+
}
|
|
7295
|
+
render() {
|
|
7296
|
+
let stepFound = false;
|
|
7297
|
+
this.steps.forEach((step, index) => {
|
|
7298
|
+
step.number = index + 1;
|
|
7299
|
+
step.isCurrent = this.currentStep === step.step;
|
|
7300
|
+
if (step.isCurrent) {
|
|
7301
|
+
stepFound = true;
|
|
7302
|
+
}
|
|
7303
|
+
if (step.hasSubSteps) {
|
|
7304
|
+
step.subSteps.forEach((subStep) => {
|
|
7305
|
+
subStep.isSubStep = true;
|
|
7306
|
+
subStep.isCurrent = this.currentStep === subStep.step;
|
|
7307
|
+
if (subStep.isCurrent) {
|
|
7308
|
+
stepFound = true;
|
|
7309
|
+
}
|
|
7310
|
+
subStep.isComplete = !stepFound;
|
|
7311
|
+
});
|
|
7312
|
+
step.isComplete = step.subSteps.toArray().every((_) => {
|
|
7313
|
+
return _.isComplete;
|
|
7314
|
+
});
|
|
7315
|
+
step.isActive = step.subSteps.toArray().some((_) => {
|
|
7316
|
+
return _.isCurrent;
|
|
7317
|
+
});
|
|
7318
|
+
}
|
|
7319
|
+
else {
|
|
7320
|
+
step.isComplete = !stepFound;
|
|
7321
|
+
}
|
|
7322
|
+
});
|
|
7323
|
+
}
|
|
7324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyStepperComponent, isStandalone: false, selector: "monkey-stepper", inputs: { direction: "direction", id: "id", currentStep: "currentStep" }, host: { attributes: { "data-testid": "monkey-stepper" }, properties: { "attr.id": "monkeyId", "id": "monkeyId", "class.horizontal": "direction === 'horizontal'" } }, queries: [{ propertyName: "steps", predicate: MonkeyStepComponent }], usesOnChanges: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["monkey-stepper{display:inline-flex;flex-direction:column;width:100%;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-12);line-height:var(--mecx-lh-16);letter-spacing:.24px;font-weight:var(--mecx-fw-medium);gap:var(--mecx-spaces-small)}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep){margin-bottom:12px;position:relative}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep):after{content:\"\";background:var(--mecx-color-success-main);display:block;position:absolute;width:1px;height:13px;border-radius:10px;left:8px;top:23px}monkey-stepper.horizontal{flex-direction:row;gap:0}monkey-stepper.horizontal>monkey-step{flex:1}monkey-stepper.horizontal>monkey-step:first-child .step:before,monkey-stepper.horizontal>monkey-step:last-child .step:after{background-color:transparent!important}monkey-stepper.horizontal>monkey-step .substeps{display:none!important}monkey-stepper.horizontal>monkey-step .item{flex-direction:column;margin:0}monkey-stepper.horizontal>monkey-step .item .label{justify-content:center;text-align:center}@media (max-width: 575.98px){monkey-stepper.horizontal>monkey-step .item .label{display:none}}monkey-stepper.horizontal>monkey-step .item .current-icon{display:none}monkey-stepper.horizontal>monkey-step .item .step{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}monkey-stepper.horizontal>monkey-step .item .step:before{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item .step:after{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item.complete .step:after,monkey-stepper.horizontal>monkey-step .item.complete .step:before{background-color:var(--mecx-color-success-main)}monkey-stepper.horizontal>monkey-step .item.current .step:after,monkey-stepper.horizontal>monkey-step .item.current .step:before{background-color:var(--mecx-color-theme-main)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7326
|
+
}
|
|
7327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperComponent, decorators: [{
|
|
7328
|
+
type: Component,
|
|
7329
|
+
args: [{ selector: 'monkey-stepper', standalone: false, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7330
|
+
'data-testid': 'monkey-stepper',
|
|
7331
|
+
'[attr.id]': 'monkeyId',
|
|
7332
|
+
'[id]': 'monkeyId',
|
|
7333
|
+
'[class.horizontal]': `direction === 'horizontal'`
|
|
7334
|
+
}, styles: ["monkey-stepper{display:inline-flex;flex-direction:column;width:100%;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-12);line-height:var(--mecx-lh-16);letter-spacing:.24px;font-weight:var(--mecx-fw-medium);gap:var(--mecx-spaces-small)}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep){margin-bottom:12px;position:relative}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep):after{content:\"\";background:var(--mecx-color-success-main);display:block;position:absolute;width:1px;height:13px;border-radius:10px;left:8px;top:23px}monkey-stepper.horizontal{flex-direction:row;gap:0}monkey-stepper.horizontal>monkey-step{flex:1}monkey-stepper.horizontal>monkey-step:first-child .step:before,monkey-stepper.horizontal>monkey-step:last-child .step:after{background-color:transparent!important}monkey-stepper.horizontal>monkey-step .substeps{display:none!important}monkey-stepper.horizontal>monkey-step .item{flex-direction:column;margin:0}monkey-stepper.horizontal>monkey-step .item .label{justify-content:center;text-align:center}@media (max-width: 575.98px){monkey-stepper.horizontal>monkey-step .item .label{display:none}}monkey-stepper.horizontal>monkey-step .item .current-icon{display:none}monkey-stepper.horizontal>monkey-step .item .step{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}monkey-stepper.horizontal>monkey-step .item .step:before{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item .step:after{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item.complete .step:after,monkey-stepper.horizontal>monkey-step .item.complete .step:before{background-color:var(--mecx-color-success-main)}monkey-stepper.horizontal>monkey-step .item.current .step:after,monkey-stepper.horizontal>monkey-step .item.current .step:before{background-color:var(--mecx-color-theme-main)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
7335
|
+
}], propDecorators: { steps: [{
|
|
7336
|
+
type: ContentChildren,
|
|
7337
|
+
args: [MonkeyStepComponent]
|
|
7338
|
+
}], direction: [{
|
|
7339
|
+
type: Input
|
|
7340
|
+
}], id: [{
|
|
7341
|
+
type: Input
|
|
7342
|
+
}], currentStep: [{
|
|
7343
|
+
type: Input
|
|
7344
|
+
}] } });
|
|
7345
|
+
|
|
7346
|
+
/** ************************
|
|
7347
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7348
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7349
|
+
* MIT Licence
|
|
7350
|
+
************************* */
|
|
7351
|
+
class MonkeyStepperModule {
|
|
7352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7353
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent, MonkeyIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
|
|
7354
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperModule, imports: [MonkeyIconComponent] }); }
|
|
7355
|
+
}
|
|
7356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperModule, decorators: [{
|
|
7357
|
+
type: NgModule,
|
|
7358
|
+
args: [{
|
|
7359
|
+
declarations: [MonkeyStepperComponent, MonkeyStepComponent],
|
|
7360
|
+
imports: [UtilIconComponent, MonkeyIconComponent],
|
|
7361
|
+
exports: [MonkeyStepperComponent, MonkeyStepComponent]
|
|
7362
|
+
}]
|
|
7363
|
+
}] });
|
|
7364
|
+
|
|
7365
|
+
/** ************************
|
|
7366
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7367
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7368
|
+
* MIT Licence
|
|
7369
|
+
************************* */
|
|
7370
|
+
class MonkeyTabLinkDirective {
|
|
7371
|
+
get isDisabled() {
|
|
7372
|
+
return this.disabled;
|
|
7373
|
+
}
|
|
7374
|
+
get tabIndex() {
|
|
7375
|
+
return this.disabled ? -1 : 0;
|
|
7376
|
+
}
|
|
7377
|
+
constructor(router) {
|
|
7378
|
+
this.router = router;
|
|
7379
|
+
this.disabled = false;
|
|
7380
|
+
this.destroyRef = inject(DestroyRef);
|
|
7381
|
+
this.el = inject((ElementRef));
|
|
7382
|
+
// ignore
|
|
7383
|
+
}
|
|
7384
|
+
ngOnInit() {
|
|
7385
|
+
if (this.router) {
|
|
7386
|
+
this.updateActiveState();
|
|
7387
|
+
this.router.events
|
|
7388
|
+
.pipe(filter((event) => {
|
|
7389
|
+
return event instanceof NavigationEnd;
|
|
7390
|
+
}), takeUntilDestroyed(this.destroyRef))
|
|
7391
|
+
.subscribe(() => {
|
|
7392
|
+
this.updateActiveState();
|
|
7393
|
+
});
|
|
7394
|
+
}
|
|
7395
|
+
}
|
|
7396
|
+
updateActiveState() {
|
|
7397
|
+
if (this.disabled)
|
|
7398
|
+
return;
|
|
7399
|
+
const link = this.el.nativeElement;
|
|
7400
|
+
const routerLink = link.getAttribute('routerLink');
|
|
7401
|
+
if (routerLink && this.router) {
|
|
7402
|
+
const isActive = this.router.url === routerLink ||
|
|
7403
|
+
(routerLink !== '/' && this.router.url.startsWith(routerLink));
|
|
7404
|
+
if (isActive) {
|
|
7405
|
+
link.classList.add('active');
|
|
7406
|
+
}
|
|
7407
|
+
else {
|
|
7408
|
+
link.classList.remove('active');
|
|
7409
|
+
}
|
|
7410
|
+
}
|
|
7411
|
+
}
|
|
7412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabLinkDirective, deps: [{ token: Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7413
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: MonkeyTabLinkDirective, isStandalone: false, selector: "[monkey-tab-link]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
|
|
7414
|
+
}
|
|
7415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabLinkDirective, decorators: [{
|
|
7416
|
+
type: Directive,
|
|
7417
|
+
args: [{
|
|
7418
|
+
selector: '[monkey-tab-link]',
|
|
7419
|
+
standalone: false
|
|
7420
|
+
}]
|
|
7421
|
+
}], ctorParameters: () => [{ type: i1$2.Router, decorators: [{
|
|
7422
|
+
type: Optional
|
|
7423
|
+
}, {
|
|
7424
|
+
type: Inject,
|
|
7425
|
+
args: [Router]
|
|
7426
|
+
}] }], propDecorators: { disabled: [{
|
|
7427
|
+
type: Input,
|
|
7428
|
+
args: [{ transform: booleanAttribute }]
|
|
7429
|
+
}], isDisabled: [{
|
|
7430
|
+
type: HostBinding,
|
|
7431
|
+
args: ['class.disabled']
|
|
7432
|
+
}], tabIndex: [{
|
|
7433
|
+
type: HostBinding,
|
|
7434
|
+
args: ['attr.tabindex']
|
|
7435
|
+
}] } });
|
|
7436
|
+
|
|
7437
|
+
/** ************************
|
|
7438
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7439
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7440
|
+
* MIT Licence
|
|
7441
|
+
************************* */
|
|
7442
|
+
class MonkeyTabComponent {
|
|
7443
|
+
constructor() {
|
|
7444
|
+
this.value = '';
|
|
7445
|
+
this.disabled = false;
|
|
7446
|
+
this.onClick = new EventEmitter();
|
|
7447
|
+
this.isSelected = false;
|
|
7448
|
+
}
|
|
7449
|
+
handleClick() {
|
|
7450
|
+
if (!this.disabled) {
|
|
7451
|
+
this.onClick.emit(this.value);
|
|
7452
|
+
}
|
|
7453
|
+
}
|
|
7454
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: MonkeyTabComponent, isStandalone: false, selector: "monkey-tab", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onClick: "onClick" }, host: { properties: { "class.selected": "this.isSelected" } }, ngImport: i0, template: `
|
|
7456
|
+
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
7457
|
+
<ng-content />
|
|
7458
|
+
</button>
|
|
7459
|
+
`, isInline: true, styles: [":host{display:block}\n"] }); }
|
|
7460
|
+
}
|
|
7461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabComponent, decorators: [{
|
|
7462
|
+
type: Component,
|
|
7463
|
+
args: [{ selector: 'monkey-tab', standalone: false, template: `
|
|
7464
|
+
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
7465
|
+
<ng-content />
|
|
7466
|
+
</button>
|
|
7467
|
+
`, styles: [":host{display:block}\n"] }]
|
|
7468
|
+
}], propDecorators: { value: [{
|
|
7469
|
+
type: Input
|
|
7470
|
+
}], disabled: [{
|
|
7471
|
+
type: Input,
|
|
7472
|
+
args: [{ transform: booleanAttribute }]
|
|
7473
|
+
}], onClick: [{
|
|
7474
|
+
type: Output
|
|
7475
|
+
}], isSelected: [{
|
|
7476
|
+
type: HostBinding,
|
|
7477
|
+
args: ['class.selected']
|
|
7478
|
+
}] } });
|
|
7479
|
+
|
|
7480
|
+
/** ************************
|
|
7481
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7482
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7483
|
+
* MIT Licence
|
|
7484
|
+
************************* */
|
|
7485
|
+
class MonkeyTabsComponent {
|
|
7486
|
+
constructor() {
|
|
7487
|
+
this.monkeyId = inject(IdGenerator).getId('monkey-tabs-');
|
|
7488
|
+
this.selected = '';
|
|
7489
|
+
this.fullWidth = false;
|
|
7490
|
+
this.position = 'start';
|
|
7491
|
+
this.onChange = new EventEmitter();
|
|
7492
|
+
this.enabledLeftArrow = false;
|
|
7493
|
+
this.enabledRightArrow = false;
|
|
7494
|
+
this.hasScroll = false;
|
|
7495
|
+
this.scrollPosition = 0;
|
|
7496
|
+
this.destroyRef = inject(DestroyRef);
|
|
7497
|
+
}
|
|
7498
|
+
updateScrollPosition() {
|
|
7499
|
+
this.tabsContent.nativeElement.style.transform = `translateX(-${this.scrollPosition}px)`;
|
|
7500
|
+
this.updateScrollArrows();
|
|
7501
|
+
}
|
|
7502
|
+
updateScrollArrows() {
|
|
7503
|
+
if (!this.tabsHeader || !this.tabsContent)
|
|
7504
|
+
return;
|
|
7505
|
+
const headerWidth = this.tabsHeader.nativeElement.offsetWidth;
|
|
7506
|
+
const contentWidth = this.tabsContent.nativeElement.scrollWidth;
|
|
7507
|
+
const maxScroll = contentWidth - headerWidth;
|
|
7508
|
+
this.hasScroll = maxScroll > 0;
|
|
7509
|
+
this.enabledLeftArrow = this.scrollPosition > 0;
|
|
7510
|
+
this.enabledRightArrow = this.scrollPosition < maxScroll && maxScroll > 0;
|
|
7511
|
+
}
|
|
7512
|
+
selectTab(value) {
|
|
7513
|
+
this.selected = value;
|
|
7514
|
+
this.onChange.emit(value);
|
|
7515
|
+
this.updateTabSelection();
|
|
7516
|
+
}
|
|
7517
|
+
updateTabSelection() {
|
|
7518
|
+
if (!this.tabs)
|
|
7519
|
+
return;
|
|
7520
|
+
this.tabs.forEach((tab) => {
|
|
7521
|
+
tab.isSelected = tab.value === this.selected;
|
|
7522
|
+
});
|
|
7523
|
+
}
|
|
7524
|
+
ngOnChanges() {
|
|
7525
|
+
this.updateTabSelection();
|
|
7526
|
+
}
|
|
7527
|
+
ngAfterViewInit() {
|
|
7528
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
7529
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
7530
|
+
this.updateScrollArrows();
|
|
7531
|
+
});
|
|
7532
|
+
this.resizeObserver.observe(this.tabsHeader.nativeElement);
|
|
7533
|
+
}
|
|
7534
|
+
setTimeout(() => {
|
|
7535
|
+
this.updateScrollArrows();
|
|
7536
|
+
}, 0);
|
|
7537
|
+
}
|
|
7538
|
+
ngAfterContentInit() {
|
|
7539
|
+
this.updateTabsEvents();
|
|
7540
|
+
}
|
|
7541
|
+
updateTabsEvents() {
|
|
7542
|
+
this.tabs.forEach((tab) => {
|
|
7543
|
+
tab.onClick.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
|
|
7544
|
+
this.selectTab(value);
|
|
7545
|
+
});
|
|
7546
|
+
});
|
|
7547
|
+
this.updateTabSelection();
|
|
7548
|
+
}
|
|
7549
|
+
scrollLeft() {
|
|
7550
|
+
const headerWidth = this.tabsHeader.nativeElement.offsetWidth;
|
|
7551
|
+
const scrollAmount = headerWidth * 0.8;
|
|
7552
|
+
this.scrollPosition = Math.max(0, this.scrollPosition - scrollAmount);
|
|
7553
|
+
this.updateScrollPosition();
|
|
7554
|
+
}
|
|
7555
|
+
scrollRight() {
|
|
7556
|
+
const headerWidth = this.tabsHeader.nativeElement.offsetWidth;
|
|
7557
|
+
const contentWidth = this.tabsContent.nativeElement.scrollWidth;
|
|
7558
|
+
const maxScroll = contentWidth - headerWidth;
|
|
7559
|
+
const scrollAmount = headerWidth * 0.8;
|
|
7560
|
+
this.scrollPosition = Math.min(maxScroll, this.scrollPosition + scrollAmount);
|
|
7561
|
+
this.updateScrollPosition();
|
|
7562
|
+
}
|
|
7563
|
+
ngOnDestroy() {
|
|
7564
|
+
this.resizeObserver?.disconnect();
|
|
7565
|
+
}
|
|
7566
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyTabsComponent, isStandalone: false, selector: "monkey-tabs", inputs: { selected: "selected", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], position: "position" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-tabs" }, properties: { "attr.id": "monkeyId", "id": "monkeyId" } }, queries: [{ propertyName: "tabs", predicate: MonkeyTabComponent }], viewQueries: [{ propertyName: "tabsHeader", first: true, predicate: ["tabsHeader"], descendants: true }, { propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
7568
|
+
@if (hasScroll) {
|
|
7569
|
+
<button
|
|
7570
|
+
class="scroll-arrow scroll-arrow-left"
|
|
7571
|
+
[class.enabled]="enabledLeftArrow"
|
|
7572
|
+
(click)="scrollLeft()"
|
|
7573
|
+
type="button"
|
|
7574
|
+
>
|
|
7575
|
+
‹
|
|
7576
|
+
</button>
|
|
7577
|
+
}
|
|
7578
|
+
|
|
7579
|
+
<div class="monkey-tabs-header" #tabsHeader>
|
|
7580
|
+
<div
|
|
7581
|
+
class="monkey-tabs-content"
|
|
7582
|
+
[class.full-width]="fullWidth"
|
|
7583
|
+
[class]="position"
|
|
7584
|
+
#tabsContent
|
|
7585
|
+
>
|
|
7586
|
+
<ng-content></ng-content>
|
|
7587
|
+
</div>
|
|
7588
|
+
</div>
|
|
7589
|
+
|
|
7590
|
+
@if (hasScroll) {
|
|
7591
|
+
<button
|
|
7592
|
+
class="scroll-arrow scroll-arrow-right"
|
|
7593
|
+
[class.enabled]="enabledRightArrow"
|
|
7594
|
+
(click)="scrollRight()"
|
|
7595
|
+
type="button"
|
|
7596
|
+
>
|
|
7597
|
+
›
|
|
7598
|
+
</button>
|
|
7599
|
+
}
|
|
7600
|
+
`, isInline: true, styles: ["monkey-tabs{display:flex;align-items:center;position:relative;width:100%;overflow:hidden}monkey-tabs .monkey-tabs-header{flex:1;overflow:hidden}monkey-tabs a[monkey-tab-link]{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease;text-decoration:none}monkey-tabs a[monkey-tab-link].active:not(.disabled){color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs a[monkey-tab-link]:hover:not(.disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs a[monkey-tab-link].disabled{color:var(--mecx-color-gray-400);pointer-events:none}monkey-tabs monkey-tab{flex-shrink:0;min-width:max-content}monkey-tabs monkey-tab button{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease}monkey-tabs monkey-tab button:disabled{cursor:default;color:var(--mecx-color-gray-400)}monkey-tabs monkey-tab.selected button{color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs .monkey-tabs-content{display:flex;transition:transform .3s ease;min-width:max-content}monkey-tabs .monkey-tabs-content.full-width monkey-tab,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link]{flex:1}monkey-tabs .monkey-tabs-content.full-width monkey-tab button,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link] button{width:100%}monkey-tabs .monkey-tabs-content monkey-tab button:hover:not(:disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs .monkey-tabs-content.start{justify-content:flex-start}monkey-tabs .monkey-tabs-content.center{justify-content:center}monkey-tabs .monkey-tabs-content.end{justify-content:flex-end}monkey-tabs .scroll-arrow{width:32px;height:32px;background:transparent;border:none;font-size:18px;color:var(--mecx-color-gray-400);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;cursor:default;border-bottom:2px solid var(--mecx-color-gray-400);position:relative}monkey-tabs .scroll-arrow:before{transition:all .2s ease;opacity:0;content:\"\";display:block;height:32px;width:16px;position:absolute;top:0;background:transparent;z-index:1}monkey-tabs .scroll-arrow.scroll-arrow-left.enabled:before{background:linear-gradient(90deg,#0000001a,#0000);opacity:1;right:-16px}monkey-tabs .scroll-arrow.scroll-arrow-right.enabled:before{background:linear-gradient(-90deg,#0000001a,#0000);opacity:1;left:-16px}monkey-tabs .scroll-arrow.enabled{color:var(--mecx-color-gray-900)}monkey-tabs .scroll-arrow.enabled:hover{background-color:var(--mecx-color-gray-100);cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7601
|
+
}
|
|
7602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsComponent, decorators: [{
|
|
7603
|
+
type: Component,
|
|
7604
|
+
args: [{ selector: 'monkey-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: `
|
|
7605
|
+
@if (hasScroll) {
|
|
7606
|
+
<button
|
|
7607
|
+
class="scroll-arrow scroll-arrow-left"
|
|
7608
|
+
[class.enabled]="enabledLeftArrow"
|
|
7609
|
+
(click)="scrollLeft()"
|
|
7610
|
+
type="button"
|
|
7611
|
+
>
|
|
7612
|
+
‹
|
|
7613
|
+
</button>
|
|
7614
|
+
}
|
|
7615
|
+
|
|
7616
|
+
<div class="monkey-tabs-header" #tabsHeader>
|
|
7617
|
+
<div
|
|
7618
|
+
class="monkey-tabs-content"
|
|
7619
|
+
[class.full-width]="fullWidth"
|
|
7620
|
+
[class]="position"
|
|
7621
|
+
#tabsContent
|
|
7622
|
+
>
|
|
7623
|
+
<ng-content></ng-content>
|
|
7624
|
+
</div>
|
|
7625
|
+
</div>
|
|
7626
|
+
|
|
7627
|
+
@if (hasScroll) {
|
|
7628
|
+
<button
|
|
7629
|
+
class="scroll-arrow scroll-arrow-right"
|
|
7630
|
+
[class.enabled]="enabledRightArrow"
|
|
7631
|
+
(click)="scrollRight()"
|
|
7632
|
+
type="button"
|
|
7633
|
+
>
|
|
7634
|
+
›
|
|
7635
|
+
</button>
|
|
7636
|
+
}
|
|
7637
|
+
`, host: {
|
|
7638
|
+
'data-testid': 'monkey-tabs',
|
|
7639
|
+
'[attr.id]': 'monkeyId',
|
|
7640
|
+
'[id]': 'monkeyId'
|
|
7641
|
+
}, styles: ["monkey-tabs{display:flex;align-items:center;position:relative;width:100%;overflow:hidden}monkey-tabs .monkey-tabs-header{flex:1;overflow:hidden}monkey-tabs a[monkey-tab-link]{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease;text-decoration:none}monkey-tabs a[monkey-tab-link].active:not(.disabled){color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs a[monkey-tab-link]:hover:not(.disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs a[monkey-tab-link].disabled{color:var(--mecx-color-gray-400);pointer-events:none}monkey-tabs monkey-tab{flex-shrink:0;min-width:max-content}monkey-tabs monkey-tab button{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease}monkey-tabs monkey-tab button:disabled{cursor:default;color:var(--mecx-color-gray-400)}monkey-tabs monkey-tab.selected button{color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs .monkey-tabs-content{display:flex;transition:transform .3s ease;min-width:max-content}monkey-tabs .monkey-tabs-content.full-width monkey-tab,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link]{flex:1}monkey-tabs .monkey-tabs-content.full-width monkey-tab button,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link] button{width:100%}monkey-tabs .monkey-tabs-content monkey-tab button:hover:not(:disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs .monkey-tabs-content.start{justify-content:flex-start}monkey-tabs .monkey-tabs-content.center{justify-content:center}monkey-tabs .monkey-tabs-content.end{justify-content:flex-end}monkey-tabs .scroll-arrow{width:32px;height:32px;background:transparent;border:none;font-size:18px;color:var(--mecx-color-gray-400);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;cursor:default;border-bottom:2px solid var(--mecx-color-gray-400);position:relative}monkey-tabs .scroll-arrow:before{transition:all .2s ease;opacity:0;content:\"\";display:block;height:32px;width:16px;position:absolute;top:0;background:transparent;z-index:1}monkey-tabs .scroll-arrow.scroll-arrow-left.enabled:before{background:linear-gradient(90deg,#0000001a,#0000);opacity:1;right:-16px}monkey-tabs .scroll-arrow.scroll-arrow-right.enabled:before{background:linear-gradient(-90deg,#0000001a,#0000);opacity:1;left:-16px}monkey-tabs .scroll-arrow.enabled{color:var(--mecx-color-gray-900)}monkey-tabs .scroll-arrow.enabled:hover{background-color:var(--mecx-color-gray-100);cursor:pointer}\n"] }]
|
|
7642
|
+
}], propDecorators: { selected: [{
|
|
7643
|
+
type: Input
|
|
7644
|
+
}], fullWidth: [{
|
|
7645
|
+
type: Input,
|
|
7646
|
+
args: [{ transform: booleanAttribute }]
|
|
7647
|
+
}], position: [{
|
|
7648
|
+
type: Input
|
|
7649
|
+
}], onChange: [{
|
|
7650
|
+
type: Output
|
|
7651
|
+
}], tabs: [{
|
|
7652
|
+
type: ContentChildren,
|
|
7653
|
+
args: [MonkeyTabComponent]
|
|
7654
|
+
}], tabsHeader: [{
|
|
7655
|
+
type: ViewChild,
|
|
7656
|
+
args: ['tabsHeader']
|
|
7657
|
+
}], tabsContent: [{
|
|
7658
|
+
type: ViewChild,
|
|
7659
|
+
args: ['tabsContent']
|
|
7660
|
+
}] } });
|
|
7661
|
+
|
|
7662
|
+
/** ************************
|
|
7663
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7664
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7665
|
+
* MIT Licence
|
|
7666
|
+
************************* */
|
|
7667
|
+
class MonkeyTabsModule {
|
|
7668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7669
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsModule, declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective], exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective] }); }
|
|
7670
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsModule }); }
|
|
7671
|
+
}
|
|
7672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyTabsModule, decorators: [{
|
|
7673
|
+
type: NgModule,
|
|
7674
|
+
args: [{
|
|
7675
|
+
declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective],
|
|
7676
|
+
exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective]
|
|
7677
|
+
}]
|
|
7678
|
+
}] });
|
|
7679
|
+
|
|
6954
7680
|
/** ************************
|
|
6955
7681
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
6956
7682
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -7045,6 +7771,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7045
7771
|
}]
|
|
7046
7772
|
}] });
|
|
7047
7773
|
|
|
7774
|
+
/** ************************
|
|
7775
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
7776
|
+
* This style guide was developed by Monkey Exchange Team
|
|
7777
|
+
* MIT Licence
|
|
7778
|
+
************************* */
|
|
7779
|
+
class MonkeyStepperService {
|
|
7780
|
+
constructor() {
|
|
7781
|
+
this._steppers = signal(new Map());
|
|
7782
|
+
}
|
|
7783
|
+
currentStep(id) {
|
|
7784
|
+
return computed(() => {
|
|
7785
|
+
return this._steppers().get(id);
|
|
7786
|
+
});
|
|
7787
|
+
}
|
|
7788
|
+
setCurrentStep(id, step) {
|
|
7789
|
+
this._steppers.update((items) => {
|
|
7790
|
+
return new Map(items).set(id, step);
|
|
7791
|
+
});
|
|
7792
|
+
}
|
|
7793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7794
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
|
|
7795
|
+
}
|
|
7796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStepperService, decorators: [{
|
|
7797
|
+
type: Injectable,
|
|
7798
|
+
args: [{
|
|
7799
|
+
providedIn: 'root'
|
|
7800
|
+
}]
|
|
7801
|
+
}] });
|
|
7802
|
+
|
|
7048
7803
|
/** ************************
|
|
7049
7804
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
7050
7805
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -7061,5 +7816,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7061
7816
|
* Generated bundle index. Do not edit.
|
|
7062
7817
|
*/
|
|
7063
7818
|
|
|
7064
|
-
export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffixDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
|
|
7819
|
+
export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
|
|
7065
7820
|
//# sourceMappingURL=monkey-style-guide-v2.mjs.map
|