mapa-library-ui 1.5.0 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs +158 -43
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker-range.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +97 -23
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +157 -42
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +97 -23
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +158 -43
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +24 -7
- package/mapa-library-ui-1.5.2.tgz +0 -0
- package/package.json +1 -1
- package/src/lib/components/datepicker-range/index.d.ts +11 -5
- package/mapa-library-ui-1.5.0.tgz +0 -0
|
@@ -12,14 +12,14 @@ import * as i1$1 from '@angular/material/input';
|
|
|
12
12
|
import { MatInputModule } from '@angular/material/input';
|
|
13
13
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
14
14
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
15
|
-
import { getMapaUiTexts,
|
|
15
|
+
import { getMapaUiTexts, getStoredAppLanguage, getIntlLocale } from 'mapa-frontend-i18n';
|
|
16
16
|
import { fromEvent, ReplaySubject } from 'rxjs';
|
|
17
17
|
import * as i3$1 from '@angular/material/radio';
|
|
18
18
|
import { MatRadioModule } from '@angular/material/radio';
|
|
19
19
|
import * as i3$2 from '@angular/material/slide-toggle';
|
|
20
20
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
21
21
|
import * as i5$1 from '@angular/cdk/text-field';
|
|
22
|
-
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
22
|
+
import { provideNativeDateAdapter, DateAdapter } from '@angular/material/core';
|
|
23
23
|
import * as i3$3 from '@angular/material/datepicker';
|
|
24
24
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
25
25
|
import * as i4 from '@angular/material/checkbox';
|
|
@@ -534,6 +534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
534
534
|
*/
|
|
535
535
|
|
|
536
536
|
const DAY_MONTH_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
|
|
537
|
+
const MONTH_DAY_YEAR_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
|
|
538
|
+
const DOCS_LANGUAGE_STORAGE_KEY = "mapa-library-ui-docs-language";
|
|
537
539
|
function isValidDate(date) {
|
|
538
540
|
return !Number.isNaN(date.getTime());
|
|
539
541
|
}
|
|
@@ -546,7 +548,93 @@ function formatDateAsDayMonthYear(date) {
|
|
|
546
548
|
const year = `${date.getFullYear()}`;
|
|
547
549
|
return `${day}/${month}/${year}`;
|
|
548
550
|
}
|
|
549
|
-
function
|
|
551
|
+
function formatDateAsMonthDayYear(date) {
|
|
552
|
+
const day = `${date.getDate()}`.padStart(2, "0");
|
|
553
|
+
const month = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
554
|
+
const year = `${date.getFullYear()}`;
|
|
555
|
+
return `${month}/${day}/${year}`;
|
|
556
|
+
}
|
|
557
|
+
function normalizeDateLocale(value) {
|
|
558
|
+
if (typeof value !== "string") {
|
|
559
|
+
return "pt-BR";
|
|
560
|
+
}
|
|
561
|
+
const normalizedValue = value.trim().toLowerCase();
|
|
562
|
+
if (normalizedValue.startsWith("en")) {
|
|
563
|
+
return "en";
|
|
564
|
+
}
|
|
565
|
+
if (normalizedValue.startsWith("es")) {
|
|
566
|
+
return "es";
|
|
567
|
+
}
|
|
568
|
+
return "pt-BR";
|
|
569
|
+
}
|
|
570
|
+
function getDocsStoredLanguage() {
|
|
571
|
+
if (typeof window === "undefined") {
|
|
572
|
+
return null;
|
|
573
|
+
}
|
|
574
|
+
try {
|
|
575
|
+
return window.localStorage.getItem(DOCS_LANGUAGE_STORAGE_KEY);
|
|
576
|
+
}
|
|
577
|
+
catch {
|
|
578
|
+
return null;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
function getActiveDateLocale() {
|
|
582
|
+
return normalizeDateLocale(getDocsStoredLanguage() ?? getStoredAppLanguage());
|
|
583
|
+
}
|
|
584
|
+
function isMonthFirstDateLocale(locale = getActiveDateLocale()) {
|
|
585
|
+
return normalizeDateLocale(locale) === "en";
|
|
586
|
+
}
|
|
587
|
+
function getActiveDateFormat(locale = getActiveDateLocale()) {
|
|
588
|
+
return isMonthFirstDateLocale(locale) ? "MM/DD/YYYY" : "DD/MM/YYYY";
|
|
589
|
+
}
|
|
590
|
+
function getActiveMaterialDateFormat(locale = getActiveDateLocale()) {
|
|
591
|
+
return isMonthFirstDateLocale(locale) ? "MM/dd/yyyy" : "dd/MM/yyyy";
|
|
592
|
+
}
|
|
593
|
+
function getDateInputMask(_locale = getActiveDateLocale()) {
|
|
594
|
+
return "00/00/0000";
|
|
595
|
+
}
|
|
596
|
+
function formatDateForLocale(date, locale = getActiveDateLocale()) {
|
|
597
|
+
return isMonthFirstDateLocale(locale)
|
|
598
|
+
? formatDateAsMonthDayYear(date)
|
|
599
|
+
: formatDateAsDayMonthYear(date);
|
|
600
|
+
}
|
|
601
|
+
function parseOrderedDate(value, pattern, order) {
|
|
602
|
+
const match = pattern.exec(value.trim());
|
|
603
|
+
if (!match) {
|
|
604
|
+
return null;
|
|
605
|
+
}
|
|
606
|
+
const [, firstValue, secondValue, yearValue] = match;
|
|
607
|
+
const year = Number(yearValue);
|
|
608
|
+
const month = Number(order === "month-first" ? firstValue : secondValue);
|
|
609
|
+
const day = Number(order === "month-first" ? secondValue : firstValue);
|
|
610
|
+
const parsedDate = new Date(year, month - 1, day);
|
|
611
|
+
if (parsedDate.getFullYear() !== year ||
|
|
612
|
+
parsedDate.getMonth() !== month - 1 ||
|
|
613
|
+
parsedDate.getDate() !== day) {
|
|
614
|
+
return null;
|
|
615
|
+
}
|
|
616
|
+
return parsedDate;
|
|
617
|
+
}
|
|
618
|
+
function parseLocaleDateValue(value, locale = getActiveDateLocale()) {
|
|
619
|
+
const normalizedLocale = normalizeDateLocale(locale);
|
|
620
|
+
const parsers = normalizedLocale === "en"
|
|
621
|
+
? [
|
|
622
|
+
() => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
|
|
623
|
+
() => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
|
|
624
|
+
]
|
|
625
|
+
: [
|
|
626
|
+
() => parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first"),
|
|
627
|
+
() => parseOrderedDate(value, MONTH_DAY_YEAR_PATTERN, "month-first"),
|
|
628
|
+
];
|
|
629
|
+
for (const parse of parsers) {
|
|
630
|
+
const parsedDate = parse();
|
|
631
|
+
if (parsedDate) {
|
|
632
|
+
return parsedDate;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
return null;
|
|
636
|
+
}
|
|
637
|
+
function parseDateValue(value, locale = getActiveDateLocale()) {
|
|
550
638
|
if (value instanceof Date) {
|
|
551
639
|
return isValidDate(value) ? new Date(value.getTime()) : null;
|
|
552
640
|
}
|
|
@@ -561,11 +649,11 @@ function parseDateValue(value) {
|
|
|
561
649
|
if (!trimmedValue) {
|
|
562
650
|
return null;
|
|
563
651
|
}
|
|
564
|
-
const
|
|
565
|
-
if (
|
|
566
|
-
return
|
|
652
|
+
const localeDate = parseLocaleDateValue(trimmedValue, locale);
|
|
653
|
+
if (localeDate) {
|
|
654
|
+
return localeDate;
|
|
567
655
|
}
|
|
568
|
-
if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue)) {
|
|
656
|
+
if (DAY_MONTH_YEAR_PATTERN.test(trimmedValue) || MONTH_DAY_YEAR_PATTERN.test(trimmedValue)) {
|
|
569
657
|
return null;
|
|
570
658
|
}
|
|
571
659
|
const parsedDate = new Date(trimmedValue);
|
|
@@ -575,21 +663,7 @@ function isDateValue(value) {
|
|
|
575
663
|
return parseDateValue(value) !== null;
|
|
576
664
|
}
|
|
577
665
|
function parseBrazilianDate(value) {
|
|
578
|
-
|
|
579
|
-
if (!match) {
|
|
580
|
-
return null;
|
|
581
|
-
}
|
|
582
|
-
const [, dayValue, monthValue, yearValue] = match;
|
|
583
|
-
const day = Number(dayValue);
|
|
584
|
-
const month = Number(monthValue);
|
|
585
|
-
const year = Number(yearValue);
|
|
586
|
-
const parsedDate = new Date(year, month - 1, day);
|
|
587
|
-
if (parsedDate.getFullYear() !== year ||
|
|
588
|
-
parsedDate.getMonth() !== month - 1 ||
|
|
589
|
-
parsedDate.getDate() !== day) {
|
|
590
|
-
return null;
|
|
591
|
-
}
|
|
592
|
-
return parsedDate;
|
|
666
|
+
return parseOrderedDate(value, DAY_MONTH_YEAR_PATTERN, "day-first");
|
|
593
667
|
}
|
|
594
668
|
function normalizeDateInput(value) {
|
|
595
669
|
return parseDateValue(value);
|
|
@@ -608,7 +682,7 @@ function formatLocaleDate(value, dateStyle = "short") {
|
|
|
608
682
|
if (!date) {
|
|
609
683
|
return "";
|
|
610
684
|
}
|
|
611
|
-
return new Intl.DateTimeFormat(getIntlLocale(
|
|
685
|
+
return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
|
|
612
686
|
dateStyle,
|
|
613
687
|
}).format(date);
|
|
614
688
|
}
|
|
@@ -618,7 +692,7 @@ function formatLocaleDateTime(value, options = {}) {
|
|
|
618
692
|
return "";
|
|
619
693
|
}
|
|
620
694
|
const { dateStyle = "short", timeStyle = "short" } = options;
|
|
621
|
-
return new Intl.DateTimeFormat(getIntlLocale(
|
|
695
|
+
return new Intl.DateTimeFormat(getIntlLocale(getActiveDateLocale()), {
|
|
622
696
|
dateStyle,
|
|
623
697
|
timeStyle,
|
|
624
698
|
}).format(date);
|
|
@@ -768,27 +842,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
768
842
|
* Public API Surface of mapa-library-ui datepicker (single)
|
|
769
843
|
*/
|
|
770
844
|
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
845
|
+
function getMapaDatepickerRangeFormats() {
|
|
846
|
+
const dateInput = getActiveMaterialDateFormat();
|
|
847
|
+
return {
|
|
848
|
+
parse: {
|
|
849
|
+
dateInput,
|
|
850
|
+
},
|
|
851
|
+
display: {
|
|
852
|
+
dateInput,
|
|
853
|
+
monthYearLabel: "MMM YYYY",
|
|
854
|
+
dateA11yLabel: "LL",
|
|
855
|
+
monthYearA11yLabel: "MMMM YYYY",
|
|
856
|
+
},
|
|
857
|
+
};
|
|
858
|
+
}
|
|
782
859
|
class MapaDatepickerRange {
|
|
783
860
|
constructor(i18n, cdr) {
|
|
784
861
|
this.i18n = i18n;
|
|
785
862
|
this.cdr = cdr;
|
|
786
863
|
this.destroyRef = inject(DestroyRef);
|
|
787
|
-
this.
|
|
864
|
+
this.dateAdapter = inject((DateAdapter));
|
|
788
865
|
this.emptyValue = {
|
|
789
866
|
startDate: null,
|
|
790
867
|
endDate: null,
|
|
791
868
|
};
|
|
869
|
+
this.currentLocale = null;
|
|
792
870
|
this.formDatepicker = new FormGroup({
|
|
793
871
|
startDate: new FormControl(null),
|
|
794
872
|
endDate: new FormControl(null),
|
|
@@ -801,7 +879,14 @@ class MapaDatepickerRange {
|
|
|
801
879
|
get texts() {
|
|
802
880
|
return this.i18n.textsSignal();
|
|
803
881
|
}
|
|
882
|
+
get dateInputMask() {
|
|
883
|
+
return getDateInputMask(this.getLocale());
|
|
884
|
+
}
|
|
885
|
+
get activeDateFormat() {
|
|
886
|
+
return getActiveDateFormat(this.getLocale());
|
|
887
|
+
}
|
|
804
888
|
ngOnInit() {
|
|
889
|
+
this.syncLocaleSettings();
|
|
805
890
|
if (!this.element?.key) {
|
|
806
891
|
throw new Error("mapa-datepicker-range requires element.key to resolve the target control.");
|
|
807
892
|
}
|
|
@@ -826,6 +911,9 @@ class MapaDatepickerRange {
|
|
|
826
911
|
this.updateExternalFromDatepicker(value);
|
|
827
912
|
});
|
|
828
913
|
}
|
|
914
|
+
ngDoCheck() {
|
|
915
|
+
this.syncLocaleSettings();
|
|
916
|
+
}
|
|
829
917
|
get startDatePlaceholder() {
|
|
830
918
|
return this.texts.datepicker.startDatePlaceholder;
|
|
831
919
|
}
|
|
@@ -833,6 +921,7 @@ class MapaDatepickerRange {
|
|
|
833
921
|
return this.texts.datepicker.endDatePlaceholder;
|
|
834
922
|
}
|
|
835
923
|
syncFromExternal(value) {
|
|
924
|
+
this.syncLocaleSettings();
|
|
836
925
|
const nextValue = value ?? this.emptyValue;
|
|
837
926
|
const displayValue = {
|
|
838
927
|
startDate: nextValue.startDate,
|
|
@@ -855,6 +944,7 @@ class MapaDatepickerRange {
|
|
|
855
944
|
this.cdr.markForCheck();
|
|
856
945
|
}
|
|
857
946
|
updateExternalFromDisplay(value) {
|
|
947
|
+
this.syncLocaleSettings();
|
|
858
948
|
const nextValue = {
|
|
859
949
|
startDate: value.startDate ?? null,
|
|
860
950
|
endDate: value.endDate ?? null,
|
|
@@ -868,12 +958,13 @@ class MapaDatepickerRange {
|
|
|
868
958
|
this.cdr.markForCheck();
|
|
869
959
|
}
|
|
870
960
|
updateExternalFromDatepicker(value) {
|
|
961
|
+
this.syncLocaleSettings();
|
|
871
962
|
if (!value.startDate || !value.endDate) {
|
|
872
963
|
return;
|
|
873
964
|
}
|
|
874
965
|
const nextValue = {
|
|
875
|
-
startDate:
|
|
876
|
-
endDate:
|
|
966
|
+
startDate: formatDateForLocale(value.startDate, this.getLocale()),
|
|
967
|
+
endDate: formatDateForLocale(value.endDate, this.getLocale()),
|
|
877
968
|
};
|
|
878
969
|
this.patchExternalValue(nextValue);
|
|
879
970
|
this.formDisplay.patchValue(nextValue, { emitEvent: false });
|
|
@@ -906,11 +997,35 @@ class MapaDatepickerRange {
|
|
|
906
997
|
this.patchExternalValue(defaultRange);
|
|
907
998
|
this.cdr.markForCheck();
|
|
908
999
|
}
|
|
1000
|
+
getLocale() {
|
|
1001
|
+
return this.currentLocale ?? getActiveDateLocale();
|
|
1002
|
+
}
|
|
1003
|
+
syncLocaleSettings() {
|
|
1004
|
+
const nextLocale = getActiveDateLocale();
|
|
1005
|
+
if (this.currentLocale === nextLocale) {
|
|
1006
|
+
return;
|
|
1007
|
+
}
|
|
1008
|
+
this.currentLocale = nextLocale;
|
|
1009
|
+
this.dateAdapter.setLocale(nextLocale);
|
|
1010
|
+
const datepickerValue = this.formDatepicker.getRawValue();
|
|
1011
|
+
const hasDateRange = !!datepickerValue.startDate && !!datepickerValue.endDate;
|
|
1012
|
+
if (hasDateRange) {
|
|
1013
|
+
const formattedRange = {
|
|
1014
|
+
startDate: formatDateForLocale(datepickerValue.startDate, nextLocale),
|
|
1015
|
+
endDate: formatDateForLocale(datepickerValue.endDate, nextLocale),
|
|
1016
|
+
};
|
|
1017
|
+
this.formDisplay.patchValue(formattedRange, { emitEvent: false });
|
|
1018
|
+
if (this.rangeControl) {
|
|
1019
|
+
this.patchExternalValue(formattedRange);
|
|
1020
|
+
}
|
|
1021
|
+
}
|
|
1022
|
+
this.cdr.markForCheck();
|
|
1023
|
+
}
|
|
909
1024
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, deps: [{ token: MapaI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
910
1025
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
|
|
911
1026
|
provideNgxMask(),
|
|
912
|
-
provideNativeDateAdapter(
|
|
913
|
-
], ngImport: i0, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n mask=\"
|
|
1027
|
+
provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
|
|
1028
|
+
], ngImport: i0, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n </mat-form-field>\n <div class=\"mapa-datepicker-range__divider\">–</div>\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__end-date\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n <mat-form-field [formGroup]=\"formDatepicker\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate formControlName=\"startDate\" />\n <input matEndDate formControlName=\"endDate\" />\n </mat-date-range-input>\n </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
914
1029
|
}
|
|
915
1030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, decorators: [{
|
|
916
1031
|
type: Component,
|
|
@@ -924,8 +1039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
924
1039
|
MatInputModule,
|
|
925
1040
|
], providers: [
|
|
926
1041
|
provideNgxMask(),
|
|
927
|
-
provideNativeDateAdapter(
|
|
928
|
-
], standalone: true, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n mask=\"
|
|
1042
|
+
provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
|
|
1043
|
+
], standalone: true, template: "@if (element.label) {\n <div class=\"mapa-datepicker-range__label\">\n {{ element.label }}\n </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__start-date\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n </mat-form-field>\n <div class=\"mapa-datepicker-range__divider\">–</div>\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker-range__end-date\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"dateInputMask\"\n [attr.data-date-format]=\"activeDateFormat\"\n />\n <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n <mat-form-field [formGroup]=\"formDatepicker\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate formControlName=\"startDate\" />\n <input matEndDate formControlName=\"endDate\" />\n </mat-date-range-input>\n </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"] }]
|
|
929
1044
|
}], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
|
|
930
1045
|
type: Input
|
|
931
1046
|
}], element: [{
|