monkey-style-guide-v2 0.0.111 → 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 }] }] } });
|
|
@@ -786,7 +828,7 @@ class MonkeyAlertComponent {
|
|
|
786
828
|
return typeIcons[type];
|
|
787
829
|
}
|
|
788
830
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <a\n
|
|
831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
790
832
|
}
|
|
791
833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
792
834
|
type: Component,
|
|
@@ -794,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
|
|
|
794
836
|
'data-testid': 'monkey-alert',
|
|
795
837
|
'[attr.id]': 'id',
|
|
796
838
|
'[id]': 'id'
|
|
797
|
-
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <a\n
|
|
839
|
+
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"] }]
|
|
798
840
|
}], ctorParameters: () => [], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], onButtonClicked: [{ type: i0.Output, args: ["onButtonClicked"] }], id: [{
|
|
799
841
|
type: Input
|
|
800
842
|
}] } });
|
|
@@ -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
|