monkey-style-guide-v2 0.0.112 → 0.0.114
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,
|
|
5
|
+
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, Directive, ElementRef, InjectionToken, EventEmitter, Output, ViewContainerRef, 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,39 @@ 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
|
+
constructor() {
|
|
930
|
+
this.fallback = input.required(...(ngDevMode ? [{ debugName: "fallback" }] : []));
|
|
931
|
+
this._elementRef = inject(ElementRef);
|
|
932
|
+
}
|
|
933
|
+
ngAfterViewInit() {
|
|
934
|
+
this.checkContent();
|
|
935
|
+
}
|
|
936
|
+
ngDoCheck() {
|
|
937
|
+
this.checkContent();
|
|
938
|
+
}
|
|
939
|
+
checkContent() {
|
|
940
|
+
const text = (this._elementRef.nativeElement.textContent ?? '').trim();
|
|
941
|
+
if (!text) {
|
|
942
|
+
this._elementRef.nativeElement.innerText = this.fallback();
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
946
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: MonkeyDisplayDirective, isStandalone: false, selector: "monkey-display", inputs: { fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
947
|
+
}
|
|
948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
|
|
949
|
+
type: Directive,
|
|
950
|
+
args: [{
|
|
951
|
+
selector: 'monkey-display',
|
|
952
|
+
standalone: false
|
|
953
|
+
}]
|
|
954
|
+
}], propDecorators: { fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: true }] }] } });
|
|
955
|
+
|
|
881
956
|
/** ************************
|
|
882
957
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
883
958
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -1419,6 +1494,7 @@ class MonkeyDirectivesModule {
|
|
|
1419
1494
|
MonkeyHelperDirective,
|
|
1420
1495
|
MonkeyInfoDirective,
|
|
1421
1496
|
MonkeyLabelDirective,
|
|
1497
|
+
MonkeyDisplayDirective,
|
|
1422
1498
|
MonkeyPrefixDirective,
|
|
1423
1499
|
MonkeySuffixDirective,
|
|
1424
1500
|
MonkeyBadgeDirective,
|
|
@@ -1426,6 +1502,7 @@ class MonkeyDirectivesModule {
|
|
|
1426
1502
|
MonkeyHelperDirective,
|
|
1427
1503
|
MonkeyInfoDirective,
|
|
1428
1504
|
MonkeyLabelDirective,
|
|
1505
|
+
MonkeyDisplayDirective,
|
|
1429
1506
|
MonkeyPrefixDirective,
|
|
1430
1507
|
MonkeySuffixDirective,
|
|
1431
1508
|
MonkeyBadgeDirective,
|
|
@@ -1441,6 +1518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1441
1518
|
MonkeyHelperDirective,
|
|
1442
1519
|
MonkeyInfoDirective,
|
|
1443
1520
|
MonkeyLabelDirective,
|
|
1521
|
+
MonkeyDisplayDirective,
|
|
1444
1522
|
MonkeyPrefixDirective,
|
|
1445
1523
|
MonkeySuffixDirective,
|
|
1446
1524
|
MonkeyBadgeDirective,
|
|
@@ -1451,6 +1529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
1451
1529
|
MonkeyHelperDirective,
|
|
1452
1530
|
MonkeyInfoDirective,
|
|
1453
1531
|
MonkeyLabelDirective,
|
|
1532
|
+
MonkeyDisplayDirective,
|
|
1454
1533
|
MonkeyPrefixDirective,
|
|
1455
1534
|
MonkeySuffixDirective,
|
|
1456
1535
|
MonkeyBadgeDirective,
|
|
@@ -1536,9 +1615,11 @@ class MonkeyDictionaryService {
|
|
|
1536
1615
|
this._destroyRef = inject(DestroyRef);
|
|
1537
1616
|
this._data$ = new BehaviorSubject({
|
|
1538
1617
|
'pt-BR': {
|
|
1618
|
+
EDIT: 'Editar',
|
|
1539
1619
|
'NO-RESULTS': 'Nenhum resultado encontrado',
|
|
1540
1620
|
'NO-DATA': 'Sem dados',
|
|
1541
1621
|
'NO-DATA-ADDRESS': 'Nenhum endereço encontrado com esta pesquisa',
|
|
1622
|
+
'NOT-PROVIDED': 'Não informado',
|
|
1542
1623
|
LOADING: 'Carregando...',
|
|
1543
1624
|
'DATE-RANGE': {
|
|
1544
1625
|
'START-DATE': 'Data de início',
|
|
@@ -1579,9 +1660,11 @@ class MonkeyDictionaryService {
|
|
|
1579
1660
|
}
|
|
1580
1661
|
},
|
|
1581
1662
|
'es-CL': {
|
|
1663
|
+
EDIT: 'Editar',
|
|
1582
1664
|
'NO-RESULTS': 'No se encontraron resultados',
|
|
1583
1665
|
'NO-DATA': 'Sin datos',
|
|
1584
1666
|
'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
|
|
1667
|
+
'NOT-PROVIDED': 'No informado',
|
|
1585
1668
|
LOADING: 'Cargando...',
|
|
1586
1669
|
'DATE-RANGE': {
|
|
1587
1670
|
'START-DATE': 'Fecha de inicio',
|
|
@@ -1622,9 +1705,11 @@ class MonkeyDictionaryService {
|
|
|
1622
1705
|
}
|
|
1623
1706
|
},
|
|
1624
1707
|
'es-MX': {
|
|
1708
|
+
EDIT: 'Editar',
|
|
1625
1709
|
'NO-RESULTS': 'No se encontraron resultados',
|
|
1626
1710
|
'NO-DATA': 'Sin datos',
|
|
1627
1711
|
'NO-DATA-ADDRESS': 'No se encontraron direcciones con esta búsqueda',
|
|
1712
|
+
'NOT-PROVIDED': 'No informado',
|
|
1628
1713
|
LOADING: 'Cargando...',
|
|
1629
1714
|
'DATE-RANGE': {
|
|
1630
1715
|
'START-DATE': 'Fecha de inicio',
|
|
@@ -1665,9 +1750,11 @@ class MonkeyDictionaryService {
|
|
|
1665
1750
|
}
|
|
1666
1751
|
},
|
|
1667
1752
|
'en-US': {
|
|
1753
|
+
EDIT: 'Edit',
|
|
1668
1754
|
'NO-RESULTS': 'No results found',
|
|
1669
1755
|
'NO-DATA': 'No data',
|
|
1670
1756
|
'NO-DATA-ADDRESS': 'No address found with this search',
|
|
1757
|
+
'NOT-PROVIDED': 'Not provided',
|
|
1671
1758
|
LOADING: 'Loading...',
|
|
1672
1759
|
'DATE-RANGE': {
|
|
1673
1760
|
'START-DATE': 'Start date',
|
|
@@ -1918,10 +2005,6 @@ class MonkeyFormFieldComponent {
|
|
|
1918
2005
|
get labelId() {
|
|
1919
2006
|
return this._labelId;
|
|
1920
2007
|
}
|
|
1921
|
-
get hideBorder() {
|
|
1922
|
-
const { control } = this;
|
|
1923
|
-
return control?.type === 'input-code' || control?.type === 'radio-button';
|
|
1924
|
-
}
|
|
1925
2008
|
get showHeader() {
|
|
1926
2009
|
return this.hasLabel || this.hasHelper;
|
|
1927
2010
|
}
|
|
@@ -1936,12 +2019,6 @@ class MonkeyFormFieldComponent {
|
|
|
1936
2019
|
const invalid = this.control.ngControl?.invalid || false;
|
|
1937
2020
|
return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
|
|
1938
2021
|
}
|
|
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
2022
|
get showCalendar() {
|
|
1946
2023
|
return this.control.type === 'date' && !this.hideAction;
|
|
1947
2024
|
}
|
|
@@ -1956,6 +2033,8 @@ class MonkeyFormFieldComponent {
|
|
|
1956
2033
|
}
|
|
1957
2034
|
constructor() {
|
|
1958
2035
|
this.size = 'md';
|
|
2036
|
+
this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : []));
|
|
2037
|
+
this.onDisplayOnlyChange = output();
|
|
1959
2038
|
this.elementRef = inject(ElementRef);
|
|
1960
2039
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1961
2040
|
this._idGenerator = inject(IdGenerator);
|
|
@@ -1972,8 +2051,27 @@ class MonkeyFormFieldComponent {
|
|
|
1972
2051
|
this.hasSuffix = false;
|
|
1973
2052
|
this.hasInfo = false;
|
|
1974
2053
|
this.hasError = false;
|
|
2054
|
+
this.hideBorder = computed(() => {
|
|
2055
|
+
const { control } = this;
|
|
2056
|
+
return (control?.type === 'input-code' ||
|
|
2057
|
+
control?.type === 'radio-button' ||
|
|
2058
|
+
this.internalDisplayOnly());
|
|
2059
|
+
}, ...(ngDevMode ? [{ debugName: "hideBorder" }] : []));
|
|
2060
|
+
this.showClear = computed(() => {
|
|
2061
|
+
return (!!this.control.ngControl?.control?.value &&
|
|
2062
|
+
!this.control.disabled &&
|
|
2063
|
+
!this.control.loading &&
|
|
2064
|
+
(!this.hideAction || this.enableClear) &&
|
|
2065
|
+
!this.displayOnly());
|
|
2066
|
+
}, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
|
|
2067
|
+
this.internalDisplayOnly = signal(this.displayOnly(), ...(ngDevMode ? [{ debugName: "internalDisplayOnly" }] : []));
|
|
2068
|
+
this.editDictionary = inject(MonkeyDictionaryService).get('EDIT');
|
|
1975
2069
|
// eslint-disable-next-line no-self-assign
|
|
1976
2070
|
this.id = this.id;
|
|
2071
|
+
effect(() => {
|
|
2072
|
+
const value = this.displayOnly();
|
|
2073
|
+
this.internalDisplayOnly.set(value);
|
|
2074
|
+
});
|
|
1977
2075
|
}
|
|
1978
2076
|
updateFocusState() {
|
|
1979
2077
|
if (this.control.focused && !this._isFocused) {
|
|
@@ -2051,6 +2149,9 @@ class MonkeyFormFieldComponent {
|
|
|
2051
2149
|
ngAfterContentInit() {
|
|
2052
2150
|
this.handleFormFieldControl();
|
|
2053
2151
|
this.initializeComponents();
|
|
2152
|
+
if (this.displayOnly() && !this._displayChild) {
|
|
2153
|
+
throw new Error('monkey-form-field: When `displayOnly` is true, a <monkey-display> element is required inside.');
|
|
2154
|
+
}
|
|
2054
2155
|
}
|
|
2055
2156
|
ngAfterContentChecked() {
|
|
2056
2157
|
this.handleFormFieldControl();
|
|
@@ -2109,8 +2210,17 @@ class MonkeyFormFieldComponent {
|
|
|
2109
2210
|
this.openDatePicker();
|
|
2110
2211
|
}
|
|
2111
2212
|
}
|
|
2213
|
+
onCancelDisplayOnly(event) {
|
|
2214
|
+
event.preventDefault();
|
|
2215
|
+
event.stopPropagation();
|
|
2216
|
+
this.internalDisplayOnly.set(false);
|
|
2217
|
+
this.onDisplayOnlyChange.emit(false);
|
|
2218
|
+
setTimeout(() => {
|
|
2219
|
+
this.control.onContainerClick(event);
|
|
2220
|
+
}, 0);
|
|
2221
|
+
}
|
|
2112
2222
|
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:
|
|
2223
|
+
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
2224
|
}
|
|
2115
2225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2116
2226
|
type: Component,
|
|
@@ -2119,11 +2229,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2119
2229
|
'[class.mecx-disabled]': 'control.disabled',
|
|
2120
2230
|
'[class.mecx-form-field-focused]': 'control.focused',
|
|
2121
2231
|
'[class.mecx-form-field-invalid]': 'showInvalid',
|
|
2122
|
-
'[class.mecx-form-field-borderless]': 'hideBorder',
|
|
2232
|
+
'[class.mecx-form-field-borderless]': 'hideBorder()',
|
|
2123
2233
|
'[attr.id]': 'id',
|
|
2124
2234
|
'[id]': 'id',
|
|
2125
2235
|
'[class]': 'size'
|
|
2126
|
-
}, standalone: false, template: "@if (
|
|
2236
|
+
}, 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
2237
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2128
2238
|
type: Input
|
|
2129
2239
|
}], hideAction: [{
|
|
@@ -2134,9 +2244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2134
2244
|
args: [{ transform: booleanAttribute }]
|
|
2135
2245
|
}], size: [{
|
|
2136
2246
|
type: Input
|
|
2137
|
-
}], _formFieldControl: [{
|
|
2247
|
+
}], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{
|
|
2138
2248
|
type: ContentChild,
|
|
2139
2249
|
args: [MonkeyFormFieldControl]
|
|
2250
|
+
}], _displayChild: [{
|
|
2251
|
+
type: ContentChild,
|
|
2252
|
+
args: [MonkeyDisplayDirective]
|
|
2140
2253
|
}], _labelChildren: [{
|
|
2141
2254
|
type: ContentChildren,
|
|
2142
2255
|
args: [MonkeyLabelDirective, { descendants: true }]
|
|
@@ -2164,13 +2277,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
2164
2277
|
************************* */
|
|
2165
2278
|
class MonkeyFormFieldModule {
|
|
2166
2279
|
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 }); }
|
|
2280
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
|
|
2281
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
|
|
2169
2282
|
}
|
|
2170
2283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
|
|
2171
2284
|
type: NgModule,
|
|
2172
2285
|
args: [{
|
|
2173
|
-
imports: [UtilIconComponent],
|
|
2286
|
+
imports: [CommonModule, UtilIconComponent],
|
|
2174
2287
|
declarations: [MonkeyFormFieldComponent],
|
|
2175
2288
|
exports: [MonkeyFormFieldComponent]
|
|
2176
2289
|
}]
|
|
@@ -2350,7 +2463,7 @@ class MonkeyAutocompleteComponent {
|
|
|
2350
2463
|
return this._elementRef.nativeElement;
|
|
2351
2464
|
}
|
|
2352
2465
|
updateWidth() {
|
|
2353
|
-
this.initialDisplayWidth = this.elementTarget
|
|
2466
|
+
this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
|
|
2354
2467
|
}
|
|
2355
2468
|
ngAfterContentInit() {
|
|
2356
2469
|
this._searchEvent
|
|
@@ -2717,7 +2830,7 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2717
2830
|
return this._elementRef.nativeElement;
|
|
2718
2831
|
}
|
|
2719
2832
|
updateWidth() {
|
|
2720
|
-
this.initialDisplayWidth = this.elementTarget
|
|
2833
|
+
this.initialDisplayWidth = this.elementTarget?.offsetWidth - 12;
|
|
2721
2834
|
}
|
|
2722
2835
|
ngAfterContentInit() {
|
|
2723
2836
|
this._searchEvent
|
|
@@ -4388,7 +4501,7 @@ class MonkeyDateRangeComponent {
|
|
|
4388
4501
|
this.secondCalendar = calendars.secondCalendar;
|
|
4389
4502
|
}
|
|
4390
4503
|
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" }] }); }
|
|
4504
|
+
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
4505
|
}
|
|
4393
4506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
4394
4507
|
type: Component,
|
|
@@ -4660,7 +4773,7 @@ class MonkeyFilterBarComponent {
|
|
|
4660
4773
|
<monkey-option> Data de Emissão </monkey-option>
|
|
4661
4774
|
<monkey-option> Data de Vencimento </monkey-option>
|
|
4662
4775
|
</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"] }] }); }
|
|
4776
|
+
`, 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
4777
|
}
|
|
4665
4778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
4666
4779
|
type: Component,
|
|
@@ -7441,7 +7554,7 @@ class MonkeyPaginationSizeComponent {
|
|
|
7441
7554
|
this.id = this.id;
|
|
7442
7555
|
}
|
|
7443
7556
|
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 }); }
|
|
7557
|
+
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
7558
|
}
|
|
7446
7559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
|
|
7447
7560
|
type: Component,
|
|
@@ -8956,5 +9069,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
8956
9069
|
* Generated bundle index. Do not edit.
|
|
8957
9070
|
*/
|
|
8958
9071
|
|
|
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 };
|
|
9072
|
+
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
9073
|
//# sourceMappingURL=monkey-style-guide-v2.mjs.map
|