@cauca-911/material 17.1.1 → 17.1.3

package/fesm2022/cauca-911-material.mjs

@@ -846,47 +846,47 @@ class CaucaMaterialModule {
         CaucaSlideshowComponent] }); })();
 
 function DialogDateTimePickerComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-list-item", 10);
-    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_For_7_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r9); const hour_r3 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.hourChanged(hour_r3)); });
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 12);
+    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_For_7_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r12); const hour_r6 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.hourChanged(hour_r6)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const hour_r3 = ctx.$implicit;
+    const hour_r6 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activated", ctx_r0.selectedHour === hour_r3)("disabled", ctx_r0.disabled.someHours.includes(hour_r3));
+    i0.ɵɵproperty("activated", ctx_r0.selectedHour === hour_r6)("disabled", ctx_r0.disabled.someHours.includes(hour_r6));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((hour_r3 < 10 ? "0" : "") + hour_r3);
+    i0.ɵɵtextInterpolate((hour_r6 < 10 ? "0" : "") + hour_r6);
 } }
 function DialogDateTimePickerComponent_For_11_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-list-item", 10);
-    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_For_11_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const minute_r10 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.minuteChanged(minute_r10)); });
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 12);
+    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_For_11_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r19); const minute_r13 = restoredCtx.$implicit; const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.minuteChanged(minute_r13)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const minute_r10 = ctx.$implicit;
+    const minute_r13 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activated", ctx_r1.selectedMinute === minute_r10)("disabled", ctx_r1.disabled.someMinutes.includes(minute_r10));
+    i0.ɵɵproperty("activated", ctx_r1.selectedMinute === minute_r13)("disabled", ctx_r1.disabled.someMinutes.includes(minute_r13));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((minute_r10 < 10 ? "0" : "") + minute_r10);
+    i0.ɵɵtextInterpolate((minute_r13 < 10 ? "0" : "") + minute_r13);
 } }
 function DialogDateTimePickerComponent_div_12_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-list-item", 10);
-    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_div_12_For_3_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r24); const second_r18 = restoredCtx.$implicit; const ctx_r23 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r23.secondChanged(second_r18)); });
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 12);
+    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_div_12_For_3_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r27); const second_r21 = restoredCtx.$implicit; const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.secondChanged(second_r21)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const second_r18 = ctx.$implicit;
-    const ctx_r17 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("activated", ctx_r17.selectedSecond === second_r18)("disabled", ctx_r17.disabled.someSeconds.includes(second_r18));
+    const second_r21 = ctx.$implicit;
+    const ctx_r20 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("activated", ctx_r20.selectedSecond === second_r21)("disabled", ctx_r20.disabled.someSeconds.includes(second_r21));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((second_r18 < 10 ? "0" : "") + second_r18);
+    i0.ɵɵtextInterpolate((second_r21 < 10 ? "0" : "") + second_r21);
 } }
 function DialogDateTimePickerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "mat-list", 4);
-    i0.ɵɵrepeaterCreate(2, DialogDateTimePickerComponent_div_12_For_3_Template, 2, 3, "mat-list-item", 12, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(0, "div", 13)(1, "mat-list", 4);
+    i0.ɵɵrepeaterCreate(2, DialogDateTimePickerComponent_div_12_For_3_Template, 2, 3, "mat-list-item", 14, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -895,6 +895,36 @@ function DialogDateTimePickerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵrepeater(ctx_r2.seconds);
 } }
+function DialogDateTimePickerComponent_button_14_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "clear");
+    i0.ɵɵelementEnd();
+} }
+function DialogDateTimePickerComponent_button_14_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_button_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r29 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r29.clear()); });
+    i0.ɵɵtemplate(1, DialogDateTimePickerComponent_button_14_mat_icon_1_Template, 2, 0, "mat-icon", 10);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r3.showButtonIcons);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "material.clear"), " ");
+} }
+function DialogDateTimePickerComponent_mat_icon_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "cancel");
+    i0.ɵɵelementEnd();
+} }
+function DialogDateTimePickerComponent_mat_icon_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "check");
+    i0.ɵɵelementEnd();
+} }
 class DialogDateTimePickerComponent {
     constructor(dialogRef, options) {
         this.dialogRef = dialogRef;
@@ -907,6 +937,8 @@ class DialogDateTimePickerComponent {
         this.minimumDate = new Date();
         this.maximumDate = new Date();
         this.showSeconds = false;
+        this.showClearButton = true;
+        this.showButtonIcons = true;
         this.hours = [...Array(24).keys()];
         this.minutes = [...Array(60).keys()];
         this.seconds = [...Array(60).keys()];
@@ -925,6 +957,8 @@ class DialogDateTimePickerComponent {
         };
         this.step = options.step || this.step;
         this.showSeconds = options.showSeconds;
+        this.showButtonIcons = options.showButtonIcons ?? this.showButtonIcons;
+        this.showClearButton = options.showClearButton ?? this.showClearButton;
         this.setListHoursMinutes();
         this.initialEachComponentValue(options);
     }
@@ -1020,7 +1054,6 @@ class DialogDateTimePickerComponent {
         this.hourChanged(options.selectedDate ? new Date(options.selectedDate).getHours() : 0);
         this.minuteChanged(options.selectedDate ? new Date(options.selectedDate).getMinutes() : 0);
         this.secondChanged(options.selectedDate ? new Date(options.selectedDate).getSeconds() : 0);
-        console.log(this.selectedDate);
     }
     selectedDateIsTheMinimumDate() {
         return (this.minimumDate &&
@@ -1040,41 +1073,31 @@ class DialogDateTimePickerComponent {
         this.seconds = this.seconds.filter(seconde => seconde % this.step.seconds === 0);
     }
     static { this.ɵfac = function DialogDateTimePickerComponent_Factory(t) { return new (t || DialogDateTimePickerComponent)(i0.ɵɵdirectiveInject(i1$1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); }; }
-    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) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogDateTimePickerComponent, selectors: [["cauca-dialog-date-time-picker"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 23, 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", 4, "ngIf"], ["mat-stroked-button", "", 3, "click"], [4, "ngIf"], ["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) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div")(3, "mat-calendar", 2);
             i0.ɵɵlistener("selectedChange", function DialogDateTimePickerComponent_Template_mat_calendar_selectedChange_3_listener($event) { return ctx.dateChanged($event); });
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(4, "div", 3)(5, "mat-list", 4);
-            i0.ɵɵrepeaterCreate(6, DialogDateTimePickerComponent_For_7_Template, 2, 3, "mat-list-item", 12, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(6, DialogDateTimePickerComponent_For_7_Template, 2, 3, "mat-list-item", 14, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(8, "div", 5)(9, "mat-list", 4);
-            i0.ɵɵrepeaterCreate(10, DialogDateTimePickerComponent_For_11_Template, 2, 3, "mat-list-item", 12, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵrepeaterCreate(10, DialogDateTimePickerComponent_For_11_Template, 2, 3, "mat-list-item", 14, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(12, DialogDateTimePickerComponent_div_12_Template, 4, 1, "div", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 7)(14, "button", 8);
-            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_14_listener() { return ctx.clear(); });
-            i0.ɵɵelementStart(15, "mat-icon");
-            i0.ɵɵtext(16, "clear");
-            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "div", 7);
+            i0.ɵɵtemplate(14, DialogDateTimePickerComponent_button_14_Template, 4, 4, "button", 8);
+            i0.ɵɵelementStart(15, "button", 9);
+            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_15_listener() { return ctx.cancel(); });
+            i0.ɵɵtemplate(16, DialogDateTimePickerComponent_mat_icon_16_Template, 2, 0, "mat-icon", 10);
             i0.ɵɵtext(17);
             i0.ɵɵpipe(18, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "button", 8);
-            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_19_listener() { return ctx.cancel(); });
-            i0.ɵɵelementStart(20, "mat-icon");
-            i0.ɵɵtext(21, "cancel");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(22);
-            i0.ɵɵpipe(23, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "button", 9);
-            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_24_listener() { return ctx.confirm(); });
-            i0.ɵɵelementStart(25, "mat-icon");
-            i0.ɵɵtext(26, "check");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(27);
-            i0.ɵɵpipe(28, "translate");
+            i0.ɵɵelementStart(19, "button", 11);
+            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_19_listener() { return ctx.confirm(); });
+            i0.ɵɵtemplate(20, DialogDateTimePickerComponent_mat_icon_20_Template, 2, 0, "mat-icon", 10);
+            i0.ɵɵtext(21);
+            i0.ɵɵpipe(22, "translate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -1089,13 +1112,17 @@ class DialogDateTimePickerComponent {
             i0.ɵɵrepeater(ctx.minutes);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.showSeconds);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 9, "material.clear"), " ");
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 11, "material.cancel"), " ");
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 13, "material.apply"), " ");
-        } }, 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)}"] }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showClearButton);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showButtonIcons);
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 11, "material.cancel"), " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.showButtonIcons);
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22, 13, "material.ok"), " ");
+        } }, 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:8px;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)}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogDateTimePickerComponent, [{
         type: Component,
@@ -1107,7 +1134,7 @@ class DialogDateTimePickerComponent {
                     MatIconModule,
                     MatListModule,
                     MatNativeDateModule,
-                ], 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"] }]
+                ], 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\n<div mat-dialog-actions align=\"end\">\n    <button mat-stroked-button (click)=\"clear()\" *ngIf=\"showClearButton\">\n        <mat-icon *ngIf=\"showButtonIcons\">clear</mat-icon>\n        {{'material.clear' | translate}}\n    </button>\n    <button mat-stroked-button (click)=\"cancel()\">\n        <mat-icon *ngIf=\"showButtonIcons\">cancel</mat-icon>\n        {{'material.cancel' | translate}}\n    </button>\n    <button color=\"primary\" mat-raised-button cdkFocusInitial (click)=\"confirm()\">\n        <mat-icon *ngIf=\"showButtonIcons\">check</mat-icon>\n        {{'material.ok' | translate}}\n    </button>\n</div>", styles: ["div[mat-dialog-actions]{padding:8px;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"] }]
     }], () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -1126,6 +1153,8 @@ class CaucaDateTimePickerComponent {
         this.maximumDate = null;
         this.showSeconds = false;
         this.showFormat = 'yyyy/MM/dd, HH:mm';
+        this.showClearButton = true;
+        this.showButtonIcons = true;
         this.selectedChange = new EventEmitter();
         this.stringDate = '';
     }
@@ -1154,6 +1183,8 @@ class CaucaDateTimePickerComponent {
             minimumDate: this.minimumDate,
             maximumDate: this.maximumDate,
             showSeconds: this.showSeconds,
+            showClearButton: this.showClearButton,
+            showButtonIcons: this.showButtonIcons,
             step: {
                 hours: this.stepHours,
                 minutes: this.stepMinutes,
@@ -1168,16 +1199,23 @@ class CaucaDateTimePickerComponent {
         const rect = this.elementRef.nativeElement.getBoundingClientRect();
         const top = rect.y + rect.height - 22;
         const bottom = window.innerHeight - rect.y;
-        return window.innerHeight > (top + 350) ? {
-            left: `${rect.x}px`,
-            top: `${top}px`,
-        } : {
+        const minimumScreenSize = 800;
+        if (window.innerHeight < minimumScreenSize || window.innerWidth < minimumScreenSize) {
+            return null;
+        }
+        else if (window.innerHeight > (top + 350)) {
+            return {
+                left: `${rect.x}px`,
+                top: `${top}px`,
+            };
+        }
+        return {
             left: `${rect.x}px`,
             bottom: `${bottom}px`,
         };
     }
     static { this.ɵfac = function CaucaDateTimePickerComponent_Factory(t) { return new (t || CaucaDateTimePickerComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.MatDialog), i0.ɵɵdirectiveInject(i2.DatePipe)); }; }
-    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([
+    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", showClearButton: "showClearButton", showButtonIcons: "showButtonIcons", value: "value" }, outputs: { selectedChange: "selectedChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([
                 DatePipe,
             ]), 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) {
             i0.ɵɵelementStart(0, "mat-form-field");
@@ -1215,6 +1253,10 @@ class CaucaDateTimePickerComponent {
             type: Input
         }], showFormat: [{
             type: Input
+        }], showClearButton: [{
+            type: Input
+        }], showButtonIcons: [{
+            type: Input
         }], selectedChange: [{
             type: Output
         }], value: [{