monkey-style-guide-v2 0.0.112 → 0.0.113
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.
|
@@ -2,7 +2,7 @@ import { trigger, state, transition, style, animate, keyframes } from '@angular/
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, HostListener, NgModule, LOCALE_ID, signal, computed, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChildren, ContentChild, ViewChild,
|
|
5
|
+
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, HostListener, NgModule, LOCALE_ID, signal, computed, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, effect, ContentChildren, ContentChild, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
|
|
6
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
7
|
import * as i3 from '@angular/forms';
|
|
8
8
|
import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
@@ -318,6 +318,27 @@ class UtilIconComponent {
|
|
|
318
318
|
></path>
|
|
319
319
|
</svg>
|
|
320
320
|
}
|
|
321
|
+
|
|
322
|
+
@case ('edit') {
|
|
323
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
324
|
+
<path
|
|
325
|
+
fill-rule="evenodd"
|
|
326
|
+
clip-rule="evenodd"
|
|
327
|
+
d="M5.293 15.619L15.619 5.29299C16.009 4.90299 16.642 4.90299 17.032 5.29299L18.708 6.96899C19.098 7.35899 19.098 7.99199 18.708 8.38199L8.381 18.707C8.194 18.895 7.94 19 7.675 19H5V16.325C5 16.06 5.105 15.806 5.293 15.619Z"
|
|
328
|
+
stroke="var(--mecx-color-gray-900)"
|
|
329
|
+
stroke-width="1.5"
|
|
330
|
+
stroke-linecap="round"
|
|
331
|
+
stroke-linejoin="round"
|
|
332
|
+
/>
|
|
333
|
+
<path
|
|
334
|
+
d="M13.75 7.16016L16.84 10.2502"
|
|
335
|
+
stroke="var(--mecx-color-gray-900)"
|
|
336
|
+
stroke-width="1.5"
|
|
337
|
+
stroke-linecap="round"
|
|
338
|
+
stroke-linejoin="round"
|
|
339
|
+
/>
|
|
340
|
+
</svg>
|
|
341
|
+
}
|
|
321
342
|
}
|
|
322
343
|
`, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
|
|
323
344
|
}
|
|
@@ -555,6 +576,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
555
576
|
></path>
|
|
556
577
|
</svg>
|
|
557
578
|
}
|
|
579
|
+
|
|
580
|
+
@case ('edit') {
|
|
581
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
582
|
+
<path
|
|
583
|
+
fill-rule="evenodd"
|
|
584
|
+
clip-rule="evenodd"
|
|
585
|
+
d="M5.293 15.619L15.619 5.29299C16.009 4.90299 16.642 4.90299 17.032 5.29299L18.708 6.96899C19.098 7.35899 19.098 7.99199 18.708 8.38199L8.381 18.707C8.194 18.895 7.94 19 7.675 19H5V16.325C5 16.06 5.105 15.806 5.293 15.619Z"
|
|
586
|
+
stroke="var(--mecx-color-gray-900)"
|
|
587
|
+
stroke-width="1.5"
|
|
588
|
+
stroke-linecap="round"
|
|
589
|
+
stroke-linejoin="round"
|
|
590
|
+
/>
|
|
591
|
+
<path
|
|
592
|
+
d="M13.75 7.16016L16.84 10.2502"
|
|
593
|
+
stroke="var(--mecx-color-gray-900)"
|
|
594
|
+
stroke-width="1.5"
|
|
595
|
+
stroke-linecap="round"
|
|
596
|
+
stroke-linejoin="round"
|
|
597
|
+
/>
|
|
598
|
+
</svg>
|
|
599
|
+
}
|
|
558
600
|
}
|
|
559
601
|
`, styles: [":host{display:flex;background-color:transparent}\n"] }]
|
|
560
602
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
@@ -878,6 +920,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
878
920
|
type: Input
|
|
879
921
|
}] } });
|
|
880
922
|
|
|
923
|
+
/** ************************
|
|
924
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
925
|
+
* This style guide was developed by Monkey Exchange Team
|
|
926
|
+
* MIT Licence
|
|
927
|
+
************************* */
|
|
928
|
+
class MonkeyDisplayDirective {
|
|
929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
930
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: MonkeyDisplayDirective, isStandalone: false, selector: "monkey-display", ngImport: i0 }); }
|
|
931
|
+
}
|
|
932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
|
|
933
|
+
type: Directive,
|
|
934
|
+
args: [{
|
|
935
|
+
selector: 'monkey-display',
|
|
936
|
+
standalone: false
|
|
937
|
+
}]
|
|
938
|
+
}] });
|
|
939
|
+
|
|
881
940
|
/** ************************
|
|
882
941
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
883
942
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -1419,6 +1478,7 @@ class MonkeyDirectivesModule {
|
|
|
1419
1478
|
MonkeyHelperDirective,
|
|
1420
1479
|
MonkeyInfoDirective,
|
|
1421
1480
|
MonkeyLabelDirective,
|
|
1481
|
+
MonkeyDisplayDirective,
|
|
1422
1482
|
MonkeyPrefixDirective,
|
|
1423
1483
|
MonkeySuffixDirective,
|
|
1424
1484
|
MonkeyBadgeDirective,
|
|
@@ -1426,6 +1486,7 @@ class MonkeyDirectivesModule {
|
|
|
1426
1486
|
MonkeyHelperDirective,
|
|
1427
1487
|
MonkeyInfoDirective,
|
|
1428
1488
|
MonkeyLabelDirective,
|
|
1489
|
+
MonkeyDisplayDirective,
|
|
1429
1490
|
MonkeyPrefixDirective,
|
|
1430
1491
|
MonkeySuffixDirective,
|
|
1431
1492
|
MonkeyBadgeDirective,
|
|
@@ -1441,6 +1502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1441
1502
|
MonkeyHelperDirective,
|
|
1442
1503
|
MonkeyInfoDirective,
|
|
1443
1504
|
MonkeyLabelDirective,
|
|
1505
|
+
MonkeyDisplayDirective,
|
|
1444
1506
|
MonkeyPrefixDirective,
|
|
1445
1507
|
MonkeySuffixDirective,
|
|
1446
1508
|
MonkeyBadgeDirective,
|
|
@@ -1451,6 +1513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1451
1513
|
MonkeyHelperDirective,
|
|
1452
1514
|
MonkeyInfoDirective,
|
|
1453
1515
|
MonkeyLabelDirective,
|
|
1516
|
+
MonkeyDisplayDirective,
|
|
1454
1517
|
MonkeyPrefixDirective,
|
|
1455
1518
|
MonkeySuffixDirective,
|
|
1456
1519
|
MonkeyBadgeDirective,
|
|
@@ -1536,6 +1599,7 @@ class MonkeyDictionaryService {
|
|
|
1536
1599
|
this._destroyRef = inject(DestroyRef);
|
|
1537
1600
|
this._data$ = new BehaviorSubject({
|
|
1538
1601
|
'pt-BR': {
|
|
1602
|
+
EDIT: 'Editar',
|
|
1539
1603
|
'NO-RESULTS': 'Nenhum resultado encontrado',
|
|
1540
1604
|
'NO-DATA': 'Sem dados',
|
|
1541
1605
|
'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
|
|
@@ -1579,6 +1643,7 @@ class MonkeyDictionaryService {
|
|
|
1579
1643
|
}
|
|
1580
1644
|
},
|
|
1581
1645
|
'es-CL': {
|
|
1646
|
+
EDIT: 'Editar',
|
|
1582
1647
|
'NO-RESULTS': 'No se encontraron resultados',
|
|
1583
1648
|
'NO-DATA': 'Sin datos',
|
|
1584
1649
|
'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
|
|
@@ -1622,6 +1687,7 @@ class MonkeyDictionaryService {
|
|
|
1622
1687
|
}
|
|
1623
1688
|
},
|
|
1624
1689
|
'es-MX': {
|
|
1690
|
+
EDIT: 'Editar',
|
|
1625
1691
|
'NO-RESULTS': 'No se encontraron resultados',
|
|
1626
1692
|
'NO-DATA': 'Sin datos',
|
|
1627
1693
|
'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
|
|
@@ -1665,6 +1731,7 @@ class MonkeyDictionaryService {
|
|
|
1665
1731
|
}
|
|
1666
1732
|
},
|
|
1667
1733
|
'en-US': {
|
|
1734
|
+
EDIT: 'Edit',
|
|
1668
1735
|
'NO-RESULTS': 'No results found',
|
|
1669
1736
|
'NO-DATA': 'No data',
|
|
1670
1737
|
'NO-DATA-ADDRESS': 'No address found with this search',
|
|
@@ -1918,10 +1985,6 @@ class MonkeyFormFieldComponent {
|
|
|
1918
1985
|
get labelId() {
|
|
1919
1986
|
return this._labelId;
|
|
1920
1987
|
}
|
|
1921
|
-
get hideBorder() {
|
|
1922
|
-
const { control } = this;
|
|
1923
|
-
return control?.type === 'input-code' || control?.type === 'radio-button';
|
|
1924
|
-
}
|
|
1925
1988
|
get showHeader() {
|
|
1926
1989
|
return this.hasLabel || this.hasHelper;
|
|
1927
1990
|
}
|
|
@@ -1936,12 +1999,6 @@ class MonkeyFormFieldComponent {
|
|
|
1936
1999
|
const invalid = this.control.ngControl?.invalid || false;
|
|
1937
2000
|
return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
|
|
1938
2001
|
}
|
|
1939
|
-
get showClear() {
|
|
1940
|
-
return (!!this.control.ngControl?.control?.value &&
|
|
1941
|
-
!this.control.disabled &&
|
|
1942
|
-
!this.control.loading &&
|
|
1943
|
-
(!this.hideAction || this.enableClear));
|
|
1944
|
-
}
|
|
1945
2002
|
get showCalendar() {
|
|
1946
2003
|
return this.control.type === 'date' && !this.hideAction;
|
|
1947
2004
|
}
|
|
@@ -1956,6 +2013,8 @@ class MonkeyFormFieldComponent {
|
|
|
1956
2013
|
}
|
|
1957
2014
|
constructor() {
|
|
1958
2015
|
this.size = 'md';
|
|
2016
|
+
this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : []));
|
|
2017
|
+
this.onDisplayOnlyChange = output();
|
|
1959
2018
|
this.elementRef = inject(ElementRef);
|
|
1960
2019
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1961
2020
|
this._idGenerator = inject(IdGenerator);
|
|
@@ -1972,8 +2031,27 @@ class MonkeyFormFieldComponent {
|
|
|
1972
2031
|
this.hasSuffix = false;
|
|
1973
2032
|
this.hasInfo = false;
|
|
1974
2033
|
this.hasError = false;
|
|
2034
|
+
this.hideBorder = computed(() => {
|
|
2035
|
+
const { control } = this;
|
|
2036
|
+
return (control?.type === 'input-code' ||
|
|
2037
|
+
control?.type === 'radio-button' ||
|
|
2038
|
+
this.internalDisplayOnly());
|
|
2039
|
+
}, ...(ngDevMode ? [{ debugName: "hideBorder" }] : []));
|
|
2040
|
+
this.showClear = computed(() => {
|
|
2041
|
+
return (!!this.control.ngControl?.control?.value &&
|
|
2042
|
+
!this.control.disabled &&
|
|
2043
|
+
!this.control.loading &&
|
|
2044
|
+
(!this.hideAction || this.enableClear) &&
|
|
2045
|
+
!this.displayOnly());
|
|
2046
|
+
}, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
|
|
2047
|
+
this.internalDisplayOnly = signal(this.displayOnly(), ...(ngDevMode ? [{ debugName: "internalDisplayOnly" }] : []));
|
|
2048
|
+
this.editDictionary = inject(MonkeyDictionaryService).get('EDIT');
|
|
1975
2049
|
// eslint-disable-next-line no-self-assign
|
|
1976
2050
|
this.id = this.id;
|
|
2051
|
+
effect(() => {
|
|
2052
|
+
const value = this.displayOnly();
|
|
2053
|
+
this.internalDisplayOnly.set(value);
|
|
2054
|
+
});
|
|
1977
2055
|
}
|
|
1978
2056
|
updateFocusState() {
|
|
1979
2057
|
if (this.control.focused && !this._isFocused) {
|
|
@@ -2051,6 +2129,9 @@ class MonkeyFormFieldComponent {
|
|
|
2051
2129
|
ngAfterContentInit() {
|
|
2052
2130
|
this.handleFormFieldControl();
|
|
2053
2131
|
this.initializeComponents();
|
|
2132
|
+
if (this.displayOnly() && !this._displayChild) {
|
|
2133
|
+
throw new Error('monkey-form-field: When `displayOnly` is true, a <monkey-display> element is required inside.');
|
|
2134
|
+
}
|
|
2054
2135
|
}
|
|
2055
2136
|
ngAfterContentChecked() {
|
|
2056
2137
|
this.handleFormFieldControl();
|
|
@@ -2109,8 +2190,17 @@ class MonkeyFormFieldComponent {
|
|
|
2109
2190
|
this.openDatePicker();
|
|
2110
2191
|
}
|
|
2111
2192
|
}
|
|
2193
|
+
onCancelDisplayOnly(event) {
|
|
2194
|
+
event.preventDefault();
|
|
2195
|
+
event.stopPropagation();
|
|
2196
|
+
this.internalDisplayOnly.set(false);
|
|
2197
|
+
this.onDisplayOnlyChange.emit(false);
|
|
2198
|
+
setTimeout(() => {
|
|
2199
|
+
this.control.onContainerClick(event);
|
|
2200
|
+
}, 0);
|
|
2201
|
+
}
|
|
2112
2202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction:
|
|
2203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, 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: "_displayChild", first: true, predicate: MonkeyDisplayDirective, 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 (internalDisplayOnly()) {\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n <div class=\"mecx-form-field-display-only-header\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n </div>\n <div class=\"mecx-form-field-display-only-body\">\n <ng-content select=\"monkey-display\"></ng-content>\n </div>\n <div class=\"mecx-form-field-display-only-action\">\n {{ editDictionary | async }} <util-icon name=\"edit\" />\n </div>\n </div>\n} @else {\n @if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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{width:100%;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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:#fff;padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2114
2204
|
}
|
|
2115
2205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2116
2206
|
type: Component,
|
|
@@ -2119,11 +2209,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2119
2209
|
'[class.mecx-disabled]': 'control.disabled',
|
|
2120
2210
|
'[class.mecx-form-field-focused]': 'control.focused',
|
|
2121
2211
|
'[class.mecx-form-field-invalid]': 'showInvalid',
|
|
2122
|
-
'[class.mecx-form-field-borderless]': 'hideBorder',
|
|
2212
|
+
'[class.mecx-form-field-borderless]': 'hideBorder()',
|
|
2123
2213
|
'[attr.id]': 'id',
|
|
2124
2214
|
'[id]': 'id',
|
|
2125
2215
|
'[class]': 'size'
|
|
2126
|
-
}, standalone: false, template: "@if (
|
|
2216
|
+
}, standalone: false, template: "@if (internalDisplayOnly()) {\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n <div class=\"mecx-form-field-display-only-header\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n </div>\n <div class=\"mecx-form-field-display-only-body\">\n <ng-content select=\"monkey-display\"></ng-content>\n </div>\n <div class=\"mecx-form-field-display-only-action\">\n {{ editDictionary | async }} <util-icon name=\"edit\" />\n </div>\n </div>\n} @else {\n @if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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}\n\n<ng-template #labelTpl>\n <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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{width:100%;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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media (max-width: 767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:#fff;padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\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"] }]
|
|
2127
2217
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2128
2218
|
type: Input
|
|
2129
2219
|
}], hideAction: [{
|
|
@@ -2134,9 +2224,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2134
2224
|
args: [{ transform: booleanAttribute }]
|
|
2135
2225
|
}], size: [{
|
|
2136
2226
|
type: Input
|
|
2137
|
-
}], _formFieldControl: [{
|
|
2227
|
+
}], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{
|
|
2138
2228
|
type: ContentChild,
|
|
2139
2229
|
args: [MonkeyFormFieldControl]
|
|
2230
|
+
}], _displayChild: [{
|
|
2231
|
+
type: ContentChild,
|
|
2232
|
+
args: [MonkeyDisplayDirective]
|
|
2140
2233
|
}], _labelChildren: [{
|
|
2141
2234
|
type: ContentChildren,
|
|
2142
2235
|
args: [MonkeyLabelDirective, { descendants: true }]
|
|
@@ -2164,13 +2257,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2164
2257
|
************************* */
|
|
2165
2258
|
class MonkeyFormFieldModule {
|
|
2166
2259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2167
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
|
|
2168
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule }); }
|
|
2260
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
|
|
2261
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
|
|
2169
2262
|
}
|
|
2170
2263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
|
|
2171
2264
|
type: NgModule,
|
|
2172
2265
|
args: [{
|
|
2173
|
-
imports: [UtilIconComponent],
|
|
2266
|
+
imports: [CommonModule, UtilIconComponent],
|
|
2174
2267
|
declarations: [MonkeyFormFieldComponent],
|
|
2175
2268
|
exports: [MonkeyFormFieldComponent]
|
|
2176
2269
|
}]
|
|
@@ -2350,7 +2443,7 @@ class MonkeyAutocompleteComponent {
|
|
|
2350
2443
|
return this._elementRef.nativeElement;
|
|
2351
2444
|
}
|
|
2352
2445
|
updateWidth() {
|
|
2353
|
-
this.initialDisplayWidth = this.elementTarget
|
|
2446
|
+
this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
|
|
2354
2447
|
}
|
|
2355
2448
|
ngAfterContentInit() {
|
|
2356
2449
|
this._searchEvent
|
|
@@ -2717,7 +2810,7 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2717
2810
|
return this._elementRef.nativeElement;
|
|
2718
2811
|
}
|
|
2719
2812
|
updateWidth() {
|
|
2720
|
-
this.initialDisplayWidth = this.elementTarget
|
|
2813
|
+
this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
|
|
2721
2814
|
}
|
|
2722
2815
|
ngAfterContentInit() {
|
|
2723
2816
|
this._searchEvent
|
|
@@ -4388,7 +4481,7 @@ class MonkeyDateRangeComponent {
|
|
|
4388
4481
|
this.secondCalendar = calendars.secondCalendar;
|
|
4389
4482
|
}
|
|
4390
4483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "displayOnly"], outputs: ["onDisplayOnlyChange"], 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"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4392
4485
|
}
|
|
4393
4486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
4394
4487
|
type: Component,
|
|
@@ -4660,7 +4753,7 @@ class MonkeyFilterBarComponent {
|
|
|
4660
4753
|
<monkey-option> Data de Emissão </monkey-option>
|
|
4661
4754
|
<monkey-option> Data de Vencimento </monkey-option>
|
|
4662
4755
|
</ng-template>
|
|
4663
|
-
`, 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", "monkeyPopoverEnableAutofocus"] }, { 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"] }] }); }
|
|
4756
|
+
`, 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", "displayOnly"], outputs: ["onDisplayOnlyChange"], 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", "monkeyPopoverEnableAutofocus"] }, { 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"] }] }); }
|
|
4664
4757
|
}
|
|
4665
4758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
4666
4759
|
type: Component,
|
|
@@ -7441,7 +7534,7 @@ class MonkeyPaginationSizeComponent {
|
|
|
7441
7534
|
this.id = this.id;
|
|
7442
7535
|
}
|
|
7443
7536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7444
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n <monkey-select\n placeholder=\"''\"\n [ngModel]=\"size\"\n (onChange)=\"onChange.next($event)\"\n [disabled]=\"disabled\"\n [showSearch]=\"false\"\n >\n @for (item of sizes; track item) {\n <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n }\n </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n <monkey-select\n placeholder=\"''\"\n [ngModel]=\"size\"\n (onChange)=\"onChange.next($event)\"\n [disabled]=\"disabled\"\n [showSearch]=\"false\"\n >\n @for (item of sizes; track item) {\n <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n }\n </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7445
7538
|
}
|
|
7446
7539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
|
|
7447
7540
|
type: Component,
|
|
@@ -8956,5 +9049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
8956
9049
|
* Generated bundle index. Do not edit.
|
|
8957
9050
|
*/
|
|
8958
9051
|
|
|
8959
|
-
export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, 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, MonkeyUserProfileButtonComponent, getCurrencySymbol, injectTokenWithWarning };
|
|
9052
|
+
export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDirectivesModule, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, 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, MonkeyUserProfileButtonComponent, getCurrencySymbol, injectTokenWithWarning };
|
|
8960
9053
|
//# sourceMappingURL=monkey-style-guide-v2.mjs.map
|