@cauca-911/material 17.1.0 → 17.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/i18n/cauca/en-material.json +2 -0
- package/assets/i18n/cauca/es-material.json +2 -0
- package/assets/i18n/cauca/fr-material.json +2 -0
- package/esm2022/lib/cauca-date-time-picker/cauca-date-time-picker.component.mjs +37 -19
- package/esm2022/lib/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.mjs +51 -20
- package/esm2022/lib/cauca-date-time-picker/models/dialog-date-time-picker-data.mjs +1 -1
- package/fesm2022/cauca-911-material.mjs +92 -44
- package/fesm2022/cauca-911-material.mjs.map +1 -1
- package/lib/cauca-date-time-picker/cauca-date-time-picker.component.d.ts +5 -2
- package/lib/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.d.ts +1 -0
- package/lib/cauca-date-time-picker/models/dialog-date-time-picker-data.d.ts +3 -0
- package/package.json +1 -1
|
@@ -3,11 +3,11 @@ import { Injectable, Component, Inject, EventEmitter, ViewChild, Output, Input,
|
|
|
3
3
|
import * as i1 from '@ngx-translate/core';
|
|
4
4
|
import * as i2 from '@angular/common';
|
|
5
5
|
import { CommonModule, DatePipe } from '@angular/common';
|
|
6
|
-
import * as i3
|
|
6
|
+
import * as i3 from '@angular/forms';
|
|
7
7
|
import { Validators, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i4 from '@angular/material/button';
|
|
9
9
|
import { MatButtonModule } from '@angular/material/button';
|
|
10
|
-
import * as i4 from '@angular/material/form-field';
|
|
10
|
+
import * as i4$1 from '@angular/material/form-field';
|
|
11
11
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
12
12
|
import * as i5 from '@angular/material/icon';
|
|
13
13
|
import { MatIconModule } from '@angular/material/icon';
|
|
@@ -15,7 +15,7 @@ import * as i5$1 from '@angular/material/input';
|
|
|
15
15
|
import { MatInputModule } from '@angular/material/input';
|
|
16
16
|
import * as i6 from '@angular/material/tabs';
|
|
17
17
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
18
|
-
import * as i3$
|
|
18
|
+
import * as i3$1 from '@fortawesome/angular-fontawesome';
|
|
19
19
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
20
20
|
import * as i1$2 from '@cauca-911/core';
|
|
21
21
|
import { CaucaCoreForChildModule } from '@cauca-911/core';
|
|
@@ -25,9 +25,9 @@ import * as i1$3 from '@angular/router';
|
|
|
25
25
|
import { NavigationEnd } from '@angular/router';
|
|
26
26
|
import { style, state, animate, transition, trigger } from '@angular/animations';
|
|
27
27
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
28
|
-
import * as
|
|
28
|
+
import * as i5$2 from '@angular/material/datepicker';
|
|
29
29
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
30
|
-
import * as
|
|
30
|
+
import * as i7 from '@angular/material/list';
|
|
31
31
|
import { MatListModule } from '@angular/material/list';
|
|
32
32
|
|
|
33
33
|
class CaucaMaterialService {
|
|
@@ -109,7 +109,7 @@ class CaucaSimpleDialogComponent {
|
|
|
109
109
|
i0.ɵɵproperty("innerHTML", ctx.data.message, i0.ɵɵsanitizeHtml);
|
|
110
110
|
i0.ɵɵadvance(1);
|
|
111
111
|
i0.ɵɵproperty("ngIf", ctx.data.buttons);
|
|
112
|
-
} }, dependencies: [i2.NgForOf, i2.NgIf,
|
|
112
|
+
} }, dependencies: [i2.NgForOf, i2.NgIf, i4.MatButton, i1$1.MatDialogTitle, i1$1.MatDialogActions, i1$1.MatDialogContent], styles: ["div[mat-dialog-actions][_ngcontent-%COMP%]{margin-top:20px;text-align:center}"] }); }
|
|
113
113
|
}
|
|
114
114
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaSimpleDialogComponent, [{
|
|
115
115
|
type: Component,
|
|
@@ -238,7 +238,7 @@ class CaucaInputFileComponent {
|
|
|
238
238
|
i0.ɵɵproperty("ngIf", ctx.text);
|
|
239
239
|
i0.ɵɵadvance(1);
|
|
240
240
|
i0.ɵɵproperty("ngIf", ctx.multiple)("ngIfElse", _r4);
|
|
241
|
-
} }, dependencies: [i2.NgIf,
|
|
241
|
+
} }, dependencies: [i2.NgIf, i4.MatButton, i5.MatIcon], styles: ["[_nghost-%COMP%] input[_ngcontent-%COMP%]{display:none}"] }); }
|
|
242
242
|
}
|
|
243
243
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputFileComponent, [{
|
|
244
244
|
type: Component,
|
|
@@ -326,7 +326,7 @@ class CaucaInputMultipleLangueComponent {
|
|
|
326
326
|
i0.ɵɵproperty("selectedIndex", ctx.selectedIndex);
|
|
327
327
|
i0.ɵɵadvance(1);
|
|
328
328
|
i0.ɵɵproperty("ngForOf", ctx.labels);
|
|
329
|
-
} }, dependencies: [i2.NgForOf, i2.NgIf, i3
|
|
329
|
+
} }, dependencies: [i2.NgForOf, i2.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.RequiredValidator, i3.FormControlDirective, i4$1.MatFormField, i4$1.MatError, i5$1.MatInput, i6.MatTab, i6.MatTabGroup, i1.TranslatePipe], styles: [".mat-mdc-form-field[_ngcontent-%COMP%]{width:100%}"] }); }
|
|
330
330
|
}
|
|
331
331
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputMultipleLangueComponent, [{
|
|
332
332
|
type: Component,
|
|
@@ -483,7 +483,7 @@ class CaucaMenuVerticalComponent {
|
|
|
483
483
|
i0.ɵɵtemplate(0, CaucaMenuVerticalComponent_h4_0_Template, 5, 5, "h4", 0);
|
|
484
484
|
} if (rf & 2) {
|
|
485
485
|
i0.ɵɵproperty("ngForOf", ctx.menuItems);
|
|
486
|
-
} }, dependencies: [i2.NgForOf, i2.NgIf, i3$
|
|
486
|
+
} }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.FaIconComponent, i1.TranslatePipe], styles: [".menu[_ngcontent-%COMP%], .submenu[_ngcontent-%COMP%]{cursor:pointer}h4[_ngcontent-%COMP%]{margin:0;padding:0}h4[_ngcontent-%COMP%] .menu[_ngcontent-%COMP%]{padding:1em 0;display:flex;flex-direction:row}h4[_ngcontent-%COMP%] .menu[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{flex:1 1 auto;align-self:center}.menu-dot[_ngcontent-%COMP%]{max-width:1.1em;text-align:center;margin-right:.5em;font-size:2em}.menu-icon[_ngcontent-%COMP%]{max-width:60px;text-align:center;margin-right:.5em}.submenu[_ngcontent-%COMP%]{margin-left:1em}.submenu[_ngcontent-%COMP%] .menu[_ngcontent-%COMP%]{padding:0;font-size:.9em;line-height:2.2em}.submenu[_ngcontent-%COMP%] .menu[_ngcontent-%COMP%]:before{content:\"\";margin-left:1.1em;width:.1em;height:2.5em;position:relative;background:#ffffff;margin-right:-1.17em}"] }); }
|
|
487
487
|
}
|
|
488
488
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaMenuVerticalComponent, [{
|
|
489
489
|
type: Component,
|
|
@@ -619,7 +619,7 @@ class CaucaMenuSidebarComponent {
|
|
|
619
619
|
i0.ɵɵproperty("menuItems", ctx.menuItems);
|
|
620
620
|
i0.ɵɵadvance(5);
|
|
621
621
|
i0.ɵɵproperty("ngIf", ctx.version);
|
|
622
|
-
} }, dependencies: [i2.NgIf,
|
|
622
|
+
} }, dependencies: [i2.NgIf, i4.MatIconButton, i5.MatIcon, CaucaMenuVerticalComponent, i1.TranslatePipe], styles: ["[_nghost-%COMP%]{height:100%;flex-direction:column;display:flex;transition:all .1s ease-out;overflow:hidden;scrollbar-width:5px;scrollbar-color:rgba(0,0,0,.1) rgba(0,0,0,.2)}[_ngcontent-%COMP%]::-webkit-scrollbar{width:5px}[_ngcontent-%COMP%]::-webkit-scrollbar-track{border-radius:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1)}[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border-radius:5px;background-color:#0003;outline:1px solid slategrey}[_nghost-%COMP%] > div[_ngcontent-%COMP%]{flex:1}[_nghost-%COMP%] > .header[_ngcontent-%COMP%], [_nghost-%COMP%] > .footer[_ngcontent-%COMP%]{flex:0 0 auto}[_nghost-%COMP%] > .content[_ngcontent-%COMP%]{flex-grow:1;overflow:hidden auto}[_nghost-%COMP%] > .version[_ngcontent-%COMP%]{max-height:1em}.hidden[_nghost-%COMP%]{width:0;min-width:0;max-width:0}.mobile[_nghost-%COMP%]{width:275px;min-width:275px;max-width:275px;position:absolute;z-index:10}.collapsed[_nghost-%COMP%]{width:75px;min-width:75px;max-width:75px}.expanded[_nghost-%COMP%]{width:275px;min-width:275px;max-width:275px}[_nghost-%COMP%] .close[_ngcontent-%COMP%]{display:none}.mobile[_nghost-%COMP%] .close[_ngcontent-%COMP%]{right:0;display:inline-block;position:absolute}.double-arrow[_ngcontent-%COMP%]{height:3em;line-height:3em;cursor:pointer;position:fixed;opacity:.25;margin-top:-1em}.double-arrow[_ngcontent-%COMP%]:hover{opacity:1}.expanded[_nghost-%COMP%] .double-arrow[_ngcontent-%COMP%]:before, .collapsed[_nghost-%COMP%] .double-arrow[_ngcontent-%COMP%]:before{font-family:Material Icons;content:\"double_arrow\";font-size:3em;text-align:right}.collapsed[_nghost-%COMP%] .double-arrow[_ngcontent-%COMP%]{margin-left:10px}.expanded[_nghost-%COMP%] .double-arrow[_ngcontent-%COMP%]{margin-left:200px}.collapsed[_nghost-%COMP%] .menu-caption, .collapsed[_nghost-%COMP%] .submenu{display:none}.keepExpanded[_nghost-%COMP%] .double-arrow[_ngcontent-%COMP%]{transform:rotate(180deg);opacity:1}.version[_ngcontent-%COMP%]{bottom:0;padding:1em}.full[_ngcontent-%COMP%], .abbr[_ngcontent-%COMP%]{display:none}.collapsed[_nghost-%COMP%] .abbr[_ngcontent-%COMP%]{display:inline}.mobile[_nghost-%COMP%] .full[_ngcontent-%COMP%], .expanded[_nghost-%COMP%] .full[_ngcontent-%COMP%]{display:inline}@media only screen and (max-width: 1000px){.double-arrow[_ngcontent-%COMP%]{display:none}}"] }); }
|
|
623
623
|
}
|
|
624
624
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaMenuSidebarComponent, [{
|
|
625
625
|
type: Component,
|
|
@@ -902,7 +902,7 @@ class DialogDateTimePickerComponent {
|
|
|
902
902
|
this.selectedHour = 0;
|
|
903
903
|
this.selectedMinute = 0;
|
|
904
904
|
this.selectedSecond = 0;
|
|
905
|
-
this.initialDate =
|
|
905
|
+
this.initialDate = null;
|
|
906
906
|
this.selectedDate = null;
|
|
907
907
|
this.minimumDate = new Date();
|
|
908
908
|
this.maximumDate = new Date();
|
|
@@ -964,11 +964,20 @@ class DialogDateTimePickerComponent {
|
|
|
964
964
|
this.selectedSecond = second;
|
|
965
965
|
this.selectedDate.setSeconds(second);
|
|
966
966
|
}
|
|
967
|
+
clear() {
|
|
968
|
+
this.dialogRef.close({
|
|
969
|
+
value: null
|
|
970
|
+
});
|
|
971
|
+
}
|
|
967
972
|
cancel() {
|
|
968
|
-
this.dialogRef.close(
|
|
973
|
+
this.dialogRef.close({
|
|
974
|
+
value: this.initialDate
|
|
975
|
+
});
|
|
969
976
|
}
|
|
970
977
|
confirm() {
|
|
971
|
-
this.dialogRef.close(
|
|
978
|
+
this.dialogRef.close({
|
|
979
|
+
value: this.selectedDate
|
|
980
|
+
});
|
|
972
981
|
}
|
|
973
982
|
hourOfSelectedDateIsDisabled(hour) {
|
|
974
983
|
if (this.selectedDateIsTheMinimumDate()) {
|
|
@@ -1003,13 +1012,15 @@ class DialogDateTimePickerComponent {
|
|
|
1003
1012
|
return false;
|
|
1004
1013
|
}
|
|
1005
1014
|
initialEachComponentValue(options) {
|
|
1006
|
-
this.initialDate = options.selectedDate ? new Date(options.selectedDate) :
|
|
1015
|
+
this.initialDate = options.selectedDate ? new Date(options.selectedDate) : null;
|
|
1007
1016
|
this.minimumDate = options.minimumDate ? new Date(options.minimumDate) : null;
|
|
1008
1017
|
this.maximumDate = options.maximumDate ? new Date(options.maximumDate) : null;
|
|
1018
|
+
this.selectedDate = options.selectedDate ? new Date(options.selectedDate) : new Date();
|
|
1009
1019
|
this.dateChanged(options.selectedDate ? new Date(options.selectedDate) : null);
|
|
1010
1020
|
this.hourChanged(options.selectedDate ? new Date(options.selectedDate).getHours() : 0);
|
|
1011
1021
|
this.minuteChanged(options.selectedDate ? new Date(options.selectedDate).getMinutes() : 0);
|
|
1012
1022
|
this.secondChanged(options.selectedDate ? new Date(options.selectedDate).getSeconds() : 0);
|
|
1023
|
+
console.log(this.selectedDate);
|
|
1013
1024
|
}
|
|
1014
1025
|
selectedDateIsTheMinimumDate() {
|
|
1015
1026
|
return (this.minimumDate &&
|
|
@@ -1029,7 +1040,7 @@ class DialogDateTimePickerComponent {
|
|
|
1029
1040
|
this.seconds = this.seconds.filter(seconde => seconde % this.step.seconds === 0);
|
|
1030
1041
|
}
|
|
1031
1042
|
static { this.ɵfac = function DialogDateTimePickerComponent_Factory(t) { return new (t || DialogDateTimePickerComponent)(i0.ɵɵdirectiveInject(i1$1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); }; }
|
|
1032
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogDateTimePickerComponent, selectors: [["cauca-dialog-date-time-picker"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls:
|
|
1043
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogDateTimePickerComponent, selectors: [["cauca-dialog-date-time-picker"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 29, vars: 15, consts: [["mat-dialog-content", ""], [1, "date-time-picker"], [3, "minDate", "maxDate", "selected", "selectedChange"], [1, "hours"], [3, "disabled"], [1, "minutes"], ["class", "seconds", 4, "ngIf"], ["mat-dialog-actions", "", "align", "end"], ["mat-stroked-button", "", 3, "click"], ["color", "primary", "mat-raised-button", "", "cdkFocusInitial", "", 3, "click"], [3, "activated", "disabled", "click"], [1, "seconds"], [3, "activated", "disabled"]], template: function DialogDateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1033
1044
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div")(3, "mat-calendar", 2);
|
|
1034
1045
|
i0.ɵɵlistener("selectedChange", function DialogDateTimePickerComponent_Template_mat_calendar_selectedChange_3_listener($event) { return ctx.dateChanged($event); });
|
|
1035
1046
|
i0.ɵɵelementEnd()();
|
|
@@ -1042,15 +1053,29 @@ class DialogDateTimePickerComponent {
|
|
|
1042
1053
|
i0.ɵɵtemplate(12, DialogDateTimePickerComponent_div_12_Template, 4, 1, "div", 6);
|
|
1043
1054
|
i0.ɵɵelementEnd()();
|
|
1044
1055
|
i0.ɵɵelementStart(13, "div", 7)(14, "button", 8);
|
|
1045
|
-
i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_14_listener() { return ctx.
|
|
1056
|
+
i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_14_listener() { return ctx.clear(); });
|
|
1046
1057
|
i0.ɵɵelementStart(15, "mat-icon");
|
|
1047
|
-
i0.ɵɵtext(16, "
|
|
1058
|
+
i0.ɵɵtext(16, "clear");
|
|
1059
|
+
i0.ɵɵelementEnd();
|
|
1060
|
+
i0.ɵɵtext(17);
|
|
1061
|
+
i0.ɵɵpipe(18, "translate");
|
|
1062
|
+
i0.ɵɵelementEnd();
|
|
1063
|
+
i0.ɵɵelementStart(19, "button", 8);
|
|
1064
|
+
i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_19_listener() { return ctx.cancel(); });
|
|
1065
|
+
i0.ɵɵelementStart(20, "mat-icon");
|
|
1066
|
+
i0.ɵɵtext(21, "cancel");
|
|
1067
|
+
i0.ɵɵelementEnd();
|
|
1068
|
+
i0.ɵɵtext(22);
|
|
1069
|
+
i0.ɵɵpipe(23, "translate");
|
|
1070
|
+
i0.ɵɵelementEnd();
|
|
1071
|
+
i0.ɵɵelementStart(24, "button", 9);
|
|
1072
|
+
i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_24_listener() { return ctx.confirm(); });
|
|
1073
|
+
i0.ɵɵelementStart(25, "mat-icon");
|
|
1074
|
+
i0.ɵɵtext(26, "check");
|
|
1075
|
+
i0.ɵɵelementEnd();
|
|
1076
|
+
i0.ɵɵtext(27);
|
|
1077
|
+
i0.ɵɵpipe(28, "translate");
|
|
1048
1078
|
i0.ɵɵelementEnd()();
|
|
1049
|
-
i0.ɵɵelementStart(17, "button", 9);
|
|
1050
|
-
i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_17_listener() { return ctx.confirm(); });
|
|
1051
|
-
i0.ɵɵelementStart(18, "mat-icon");
|
|
1052
|
-
i0.ɵɵtext(19, "check");
|
|
1053
|
-
i0.ɵɵelementEnd()()();
|
|
1054
1079
|
} if (rf & 2) {
|
|
1055
1080
|
i0.ɵɵadvance(3);
|
|
1056
1081
|
i0.ɵɵproperty("minDate", ctx.minimumDate)("maxDate", ctx.maximumDate)("selected", ctx.selectedDate);
|
|
@@ -1064,8 +1089,13 @@ class DialogDateTimePickerComponent {
|
|
|
1064
1089
|
i0.ɵɵrepeater(ctx.minutes);
|
|
1065
1090
|
i0.ɵɵadvance(2);
|
|
1066
1091
|
i0.ɵɵproperty("ngIf", ctx.showSeconds);
|
|
1067
|
-
|
|
1068
|
-
|
|
1092
|
+
i0.ɵɵadvance(5);
|
|
1093
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 9, "material.clear"), " ");
|
|
1094
|
+
i0.ɵɵadvance(5);
|
|
1095
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 11, "material.cancel"), " ");
|
|
1096
|
+
i0.ɵɵadvance(5);
|
|
1097
|
+
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 13, "material.apply"), " ");
|
|
1098
|
+
} }, dependencies: [CommonModule, i2.NgIf, CaucaCoreForChildModule, i1.TranslatePipe, MatButtonModule, i4.MatButton, MatDatepickerModule, i5$2.MatCalendar, MatIconModule, i5.MatIcon, MatListModule, i7.MatList, i7.MatListItem, MatNativeDateModule], styles: ["div[mat-dialog-actions][_ngcontent-%COMP%]{padding:10px 0;border-top:1px solid #ccc}div[mat-dialog-actions][_ngcontent-%COMP%] button[_ngcontent-%COMP%]{margin:2px}.date-time-picker[_ngcontent-%COMP%]{display:flex;height:350px;overflow:hidden;justify-content:center}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{overflow:auto;flex:1;max-width:50px;scrollbar-width:none;border-left:1px solid #ccc}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > mat-list[_ngcontent-%COMP%]{width:50px;padding:0}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > mat-list[_ngcontent-%COMP%] .mat-mdc-list-item[_ngcontent-%COMP%]:not(.mat-mdc-list-item-interactive){cursor:pointer}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child{flex:4;max-width:290px;border-left:none}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child mat-calendar[_ngcontent-%COMP%]{width:290px}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}.date-time-picker[_ngcontent-%COMP%] .mdc-list-item__primary-text{font-family:var(--mat-datepicker-calendar-text-font);font-size:var(--mat-datepicker-calendar-text-size)}.date-time-picker[_ngcontent-%COMP%] .mdc-list-item--activated{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color)}.date-time-picker[_ngcontent-%COMP%] .mdc-list-item--activated .mdc-list-item__primary-text{color:var(--mat-datepicker-calendar-date-selected-state-text-color)}"] }); }
|
|
1069
1099
|
}
|
|
1070
1100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogDateTimePickerComponent, [{
|
|
1071
1101
|
type: Component,
|
|
@@ -1077,7 +1107,7 @@ class DialogDateTimePickerComponent {
|
|
|
1077
1107
|
MatIconModule,
|
|
1078
1108
|
MatListModule,
|
|
1079
1109
|
MatNativeDateModule,
|
|
1080
|
-
], template: "<div mat-dialog-content>\n <div class=\"date-time-picker\">\n <div>\n <mat-calendar\n [minDate]=\"minimumDate\"\n [maxDate]=\"maximumDate\"\n [selected]=\"selectedDate\"\n (selectedChange)=\"dateChanged($event)\"\n ></mat-calendar>\n </div>\n <div class=\"hours\">\n <mat-list [disabled]=\"disabled.hours\">\n @for (hour of hours; track hour) {\n <mat-list-item\n [activated]=\"selectedHour === hour\"\n [disabled]=\"disabled.someHours.includes(hour)\"\n (click)=\"hourChanged(hour)\"\n >{{(hour < 10 ? '0' : '') + hour}}</mat-list-item>\n }\n </mat-list>\n </div>\n <div class=\"minutes\">\n <mat-list [disabled]=\"disabled.minutes\">\n @for (minute of minutes; track minute) {\n <mat-list-item\n [activated]=\"selectedMinute === minute\"\n [disabled]=\"disabled.someMinutes.includes(minute)\"\n (click)=\"minuteChanged(minute)\"\n >{{(minute < 10 ? '0' : '') + minute}}</mat-list-item>\n }\n </mat-list>\n </div>\n <div class=\"seconds\" *ngIf=\"showSeconds\">\n <mat-list [disabled]=\"disabled.seconds\">\n @for (second of seconds; track second) {\n <mat-list-item\n [activated]=\"selectedSecond === second\"\n [disabled]=\"disabled.someSeconds.includes(second)\"\n (click)=\"secondChanged(second)\"\n >{{(second < 10 ? '0' : '') + second}}</mat-list-item>\n }\n </mat-list>\n </div>\n </div>\n</div>\n<div mat-dialog-actions align=\"end\">\n <button mat-icon-button (click)=\"cancel()\"
|
|
1110
|
+
], template: "<div mat-dialog-content>\n <div class=\"date-time-picker\">\n <div>\n <mat-calendar\n [minDate]=\"minimumDate\"\n [maxDate]=\"maximumDate\"\n [selected]=\"selectedDate\"\n (selectedChange)=\"dateChanged($event)\"\n ></mat-calendar>\n </div>\n <div class=\"hours\">\n <mat-list [disabled]=\"disabled.hours\">\n @for (hour of hours; track hour) {\n <mat-list-item\n [activated]=\"selectedHour === hour\"\n [disabled]=\"disabled.someHours.includes(hour)\"\n (click)=\"hourChanged(hour)\"\n >{{(hour < 10 ? '0' : '') + hour}}</mat-list-item>\n }\n </mat-list>\n </div>\n <div class=\"minutes\">\n <mat-list [disabled]=\"disabled.minutes\">\n @for (minute of minutes; track minute) {\n <mat-list-item\n [activated]=\"selectedMinute === minute\"\n [disabled]=\"disabled.someMinutes.includes(minute)\"\n (click)=\"minuteChanged(minute)\"\n >{{(minute < 10 ? '0' : '') + minute}}</mat-list-item>\n }\n </mat-list>\n </div>\n <div class=\"seconds\" *ngIf=\"showSeconds\">\n <mat-list [disabled]=\"disabled.seconds\">\n @for (second of seconds; track second) {\n <mat-list-item\n [activated]=\"selectedSecond === second\"\n [disabled]=\"disabled.someSeconds.includes(second)\"\n (click)=\"secondChanged(second)\"\n >{{(second < 10 ? '0' : '') + second}}</mat-list-item>\n }\n </mat-list>\n </div>\n </div>\n</div>\n<div mat-dialog-actions align=\"end\">\n <button mat-stroked-button (click)=\"clear()\">\n <mat-icon>clear</mat-icon>\n {{'material.clear' | translate}}\n </button>\n <button mat-stroked-button (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n {{'material.cancel' | translate}}\n </button>\n <button color=\"primary\" mat-raised-button cdkFocusInitial (click)=\"confirm()\">\n <mat-icon>check</mat-icon>\n {{'material.apply' | translate}}\n </button>\n</div>", styles: ["div[mat-dialog-actions]{padding:10px 0;border-top:1px solid #ccc}div[mat-dialog-actions] button{margin:2px}.date-time-picker{display:flex;height:350px;overflow:hidden;justify-content:center}.date-time-picker>div{overflow:auto;flex:1;max-width:50px;scrollbar-width:none;border-left:1px solid #ccc}.date-time-picker>div>mat-list{width:50px;padding:0}.date-time-picker>div>mat-list .mat-mdc-list-item:not(.mat-mdc-list-item-interactive){cursor:pointer}.date-time-picker>div:first-child{flex:4;max-width:290px;border-left:none}.date-time-picker>div:first-child mat-calendar{width:290px}.date-time-picker>div::-webkit-scrollbar{display:none}.date-time-picker ::ng-deep .mdc-list-item__primary-text{font-family:var(--mat-datepicker-calendar-text-font);font-size:var(--mat-datepicker-calendar-text-size)}.date-time-picker ::ng-deep .mdc-list-item--activated{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color)}.date-time-picker ::ng-deep .mdc-list-item--activated .mdc-list-item__primary-text{color:var(--mat-datepicker-calendar-date-selected-state-text-color)}\n"] }]
|
|
1081
1111
|
}], () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
1082
1112
|
type: Inject,
|
|
1083
1113
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1085,7 +1115,8 @@ class DialogDateTimePickerComponent {
|
|
|
1085
1115
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DialogDateTimePickerComponent, { className: "DialogDateTimePickerComponent", filePath: "lib/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.ts", lineNumber: 27 }); })();
|
|
1086
1116
|
|
|
1087
1117
|
class CaucaDateTimePickerComponent {
|
|
1088
|
-
constructor(dialog, datePipe) {
|
|
1118
|
+
constructor(elementRef, dialog, datePipe) {
|
|
1119
|
+
this.elementRef = elementRef;
|
|
1089
1120
|
this.dialog = dialog;
|
|
1090
1121
|
this.datePipe = datePipe;
|
|
1091
1122
|
this.stepHours = 1;
|
|
@@ -1105,7 +1136,20 @@ class CaucaDateTimePickerComponent {
|
|
|
1105
1136
|
}
|
|
1106
1137
|
}
|
|
1107
1138
|
showDialog() {
|
|
1108
|
-
const
|
|
1139
|
+
const dialogRef = this.dialog.open(DialogDateTimePickerComponent, {
|
|
1140
|
+
position: this.getDialogPosition(),
|
|
1141
|
+
data: this.getDateTimePickerOptions(),
|
|
1142
|
+
});
|
|
1143
|
+
dialogRef.afterClosed().subscribe((data) => {
|
|
1144
|
+
if (data) {
|
|
1145
|
+
this.stringDate = this.stringifyDate(data.value);
|
|
1146
|
+
this.selectedDate = data.value;
|
|
1147
|
+
this.selectedChange.emit(data.value);
|
|
1148
|
+
}
|
|
1149
|
+
});
|
|
1150
|
+
}
|
|
1151
|
+
getDateTimePickerOptions() {
|
|
1152
|
+
return {
|
|
1109
1153
|
selectedDate: this.selectedDate,
|
|
1110
1154
|
minimumDate: this.minimumDate,
|
|
1111
1155
|
maximumDate: this.maximumDate,
|
|
@@ -1116,25 +1160,29 @@ class CaucaDateTimePickerComponent {
|
|
|
1116
1160
|
seconds: this.stepSecondes,
|
|
1117
1161
|
}
|
|
1118
1162
|
};
|
|
1119
|
-
const dialogRef = this.dialog.open(DialogDateTimePickerComponent, {
|
|
1120
|
-
data: options,
|
|
1121
|
-
});
|
|
1122
|
-
dialogRef.afterClosed().subscribe((date) => {
|
|
1123
|
-
this.stringDate = this.stringifyDate(date);
|
|
1124
|
-
this.selectedDate = date;
|
|
1125
|
-
this.selectedChange.emit(date);
|
|
1126
|
-
});
|
|
1127
1163
|
}
|
|
1128
1164
|
stringifyDate(date) {
|
|
1129
1165
|
return this.datePipe.transform(date, this.showFormat);
|
|
1130
1166
|
}
|
|
1131
|
-
|
|
1167
|
+
getDialogPosition() {
|
|
1168
|
+
const rect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
1169
|
+
const top = rect.y + rect.height - 22;
|
|
1170
|
+
const bottom = window.innerHeight - rect.y;
|
|
1171
|
+
return window.innerHeight > (top + 350) ? {
|
|
1172
|
+
left: `${rect.x}px`,
|
|
1173
|
+
top: `${top}px`,
|
|
1174
|
+
} : {
|
|
1175
|
+
left: `${rect.x}px`,
|
|
1176
|
+
bottom: `${bottom}px`,
|
|
1177
|
+
};
|
|
1178
|
+
}
|
|
1179
|
+
static { this.ɵfac = function CaucaDateTimePickerComponent_Factory(t) { return new (t || CaucaDateTimePickerComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.MatDialog), i0.ɵɵdirectiveInject(i2.DatePipe)); }; }
|
|
1132
1180
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaDateTimePickerComponent, selectors: [["cauca-date-time-picker"]], inputs: { stepHours: "stepHours", stepMinutes: "stepMinutes", stepSecondes: "stepSecondes", minimumDate: "minimumDate", maximumDate: "maximumDate", showSeconds: "showSeconds", showFormat: "showFormat", value: "value" }, outputs: { selectedChange: "selectedChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([
|
|
1133
1181
|
DatePipe,
|
|
1134
|
-
]), i0.ɵɵStandaloneFeature], decls: 5, vars: 1, consts: [[
|
|
1135
|
-
i0.ɵɵelementStart(0, "mat-form-field"
|
|
1136
|
-
i0.ɵɵelement(1, "input",
|
|
1137
|
-
i0.ɵɵelementStart(2, "button",
|
|
1182
|
+
]), i0.ɵɵStandaloneFeature], decls: 5, vars: 1, consts: [["matInput", "", "readonly", "readonly", 3, "value"], ["matSuffix", "", "mat-icon-button", "", 3, "click"]], template: function CaucaDateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1183
|
+
i0.ɵɵelementStart(0, "mat-form-field");
|
|
1184
|
+
i0.ɵɵelement(1, "input", 0);
|
|
1185
|
+
i0.ɵɵelementStart(2, "button", 1);
|
|
1138
1186
|
i0.ɵɵlistener("click", function CaucaDateTimePickerComponent_Template_button_click_2_listener() { return ctx.showDialog(); });
|
|
1139
1187
|
i0.ɵɵelementStart(3, "mat-icon");
|
|
1140
1188
|
i0.ɵɵtext(4, "calendar_month");
|
|
@@ -1142,7 +1190,7 @@ class CaucaDateTimePickerComponent {
|
|
|
1142
1190
|
} if (rf & 2) {
|
|
1143
1191
|
i0.ɵɵadvance(1);
|
|
1144
1192
|
i0.ɵɵproperty("value", ctx.stringDate);
|
|
1145
|
-
} }, dependencies: [MatButtonModule,
|
|
1193
|
+
} }, dependencies: [MatButtonModule, i4.MatIconButton, MatIconModule, i5.MatIcon, MatInputModule, i5$1.MatInput, i4$1.MatFormField, i4$1.MatSuffix], styles: ["[_nghost-%COMP%]{display:block}mat-form-field[_ngcontent-%COMP%]{width:100%}"] }); }
|
|
1146
1194
|
}
|
|
1147
1195
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaDateTimePickerComponent, [{
|
|
1148
1196
|
type: Component,
|
|
@@ -1152,8 +1200,8 @@ class CaucaDateTimePickerComponent {
|
|
|
1152
1200
|
MatInputModule,
|
|
1153
1201
|
], providers: [
|
|
1154
1202
|
DatePipe,
|
|
1155
|
-
], template: "<mat-form-field
|
|
1156
|
-
}], () => [{ type: i1$1.MatDialog }, { type: i2.DatePipe }], { stepHours: [{
|
|
1203
|
+
], template: "<mat-form-field>\n <input matInput [value]=\"stringDate\" readonly=\"readonly\">\n <button matSuffix mat-icon-button (click)=\"showDialog()\">\n <mat-icon>calendar_month</mat-icon>\n </button>\n</mat-form-field>", styles: [":host{display:block}mat-form-field{width:100%}\n"] }]
|
|
1204
|
+
}], () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i2.DatePipe }], { stepHours: [{
|
|
1157
1205
|
type: Input
|
|
1158
1206
|
}], stepMinutes: [{
|
|
1159
1207
|
type: Input
|