@cauca-911/material 17.1.0 → 17.1.2

package/fesm2022/cauca-911-material.mjs

@@ -3,11 +3,11 @@ import { Injectable, Component, Inject, EventEmitter, ViewChild, Output, Input,
 import * as i1 from '@ngx-translate/core';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { Validators, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -15,7 +15,7 @@ import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i6 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i3$2 from '@fortawesome/angular-fontawesome';
+import * as i3$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$2 from '@cauca-911/core';
 import { CaucaCoreForChildModule } from '@cauca-911/core';
@@ -25,9 +25,9 @@ import * as i1$3 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
 import { style, state, animate, transition, trigger } from '@angular/animations';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i4$1 from '@angular/material/datepicker';
+import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i6$1 from '@angular/material/list';
+import * as i7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 
 class CaucaMaterialService {
@@ -57,7 +57,7 @@ class CaucaMaterialComponent {
         type: Component,
         args: [{ selector: 'cauca-material', template: "<div>{{'core.noGenericComponentOnThisLibrary' | translate}}</div>" }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMaterialComponent, { className: "CaucaMaterialComponent", filePath: "lib/cauca-material.component.ts", lineNumber: 8 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMaterialComponent, { className: "CaucaMaterialComponent", filePath: "lib\\cauca-material.component.ts", lineNumber: 8 }); })();
 
 class SimpleDialogData {
     constructor() {
@@ -109,7 +109,7 @@ class CaucaSimpleDialogComponent {
             i0.ɵɵproperty("innerHTML", ctx.data.message, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.data.buttons);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.MatButton, i1$1.MatDialogTitle, i1$1.MatDialogActions, i1$1.MatDialogContent], styles: ["div[mat-dialog-actions][_ngcontent-%COMP%]{margin-top:20px;text-align:center}"] }); }
+        } }, 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}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaSimpleDialogComponent, [{
         type: Component,
@@ -118,7 +118,7 @@ class CaucaSimpleDialogComponent {
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
             }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSimpleDialogComponent, { className: "CaucaSimpleDialogComponent", filePath: "lib/cauca-simple-dialog/cauca-simple-dialog.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSimpleDialogComponent, { className: "CaucaSimpleDialogComponent", filePath: "lib\\cauca-simple-dialog\\cauca-simple-dialog.component.ts", lineNumber: 10 }); })();
 
 const _c0$2 = ["file"];
 function CaucaInputFileComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
@@ -238,7 +238,7 @@ class CaucaInputFileComponent {
             i0.ɵɵproperty("ngIf", ctx.text);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.multiple)("ngIfElse", _r4);
-        } }, dependencies: [i2.NgIf, i3.MatButton, i5.MatIcon], styles: ["[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:none}"] }); }
+        } }, dependencies: [i2.NgIf, i4.MatButton, i5.MatIcon], styles: ["[_nghost-%COMP%]   input[_ngcontent-%COMP%]{display:none}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputFileComponent, [{
         type: Component,
@@ -257,7 +257,7 @@ class CaucaInputFileComponent {
         }], text: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaInputFileComponent, { className: "CaucaInputFileComponent", filePath: "lib/cauca-input-file/cauca-input-file.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaInputFileComponent, { className: "CaucaInputFileComponent", filePath: "lib\\cauca-input-file\\cauca-input-file.component.ts", lineNumber: 11 }); })();
 
 function CaucaInputMultipleLangueComponent_mat_tab_1_mat_error_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-error");
@@ -326,7 +326,7 @@ class CaucaInputMultipleLangueComponent {
             i0.ɵɵproperty("selectedIndex", ctx.selectedIndex);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.labels);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$1.DefaultValueAccessor, i3$1.NgControlStatus, i3$1.RequiredValidator, i3$1.FormControlDirective, i4.MatFormField, i4.MatError, i5$1.MatInput, i6.MatTab, i6.MatTabGroup, i1.TranslatePipe], styles: [".mat-mdc-form-field[_ngcontent-%COMP%]{width:100%}"] }); }
+        } }, 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%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputMultipleLangueComponent, [{
         type: Component,
@@ -334,7 +334,7 @@ class CaucaInputMultipleLangueComponent {
     }], () => [{ type: i1$2.CaucaCoreService }, { type: i1$2.TranslateService }], { value: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaInputMultipleLangueComponent, { className: "CaucaInputMultipleLangueComponent", filePath: "lib/cauca-input-multiple-langue/cauca-input-multiple-langue.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaInputMultipleLangueComponent, { className: "CaucaInputMultipleLangueComponent", filePath: "lib\\cauca-input-multiple-langue\\cauca-input-multiple-langue.component.ts", lineNumber: 10 }); })();
 
 function CaucaMenuVerticalComponent_h4_0_div_2_fa_icon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "fa-icon", 8);
@@ -483,7 +483,7 @@ class CaucaMenuVerticalComponent {
             i0.ɵɵtemplate(0, CaucaMenuVerticalComponent_h4_0_Template, 5, 5, "h4", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.menuItems);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3$2.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}"] }); }
+        } }, 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}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaMenuVerticalComponent, [{
         type: Component,
@@ -493,7 +493,7 @@ class CaucaMenuVerticalComponent {
         }], menuItems: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMenuVerticalComponent, { className: "CaucaMenuVerticalComponent", filePath: "lib/cauca-menu-vertical/cauca-menu-vertical.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMenuVerticalComponent, { className: "CaucaMenuVerticalComponent", filePath: "lib\\cauca-menu-vertical\\cauca-menu-vertical.component.ts", lineNumber: 10 }); })();
 
 function CaucaMenuSidebarComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -619,7 +619,7 @@ class CaucaMenuSidebarComponent {
             i0.ɵɵproperty("menuItems", ctx.menuItems);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.version);
-        } }, dependencies: [i2.NgIf, i3.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}}"] }); }
+        } }, 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}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaMenuSidebarComponent, [{
         type: Component,
@@ -632,7 +632,7 @@ class CaucaMenuSidebarComponent {
             type: HostListener,
             args: ['window:resize', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMenuSidebarComponent, { className: "CaucaMenuSidebarComponent", filePath: "lib/cauca-menu-sidebar/cauca-menu-sidebar.component.ts", lineNumber: 9 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaMenuSidebarComponent, { className: "CaucaMenuSidebarComponent", filePath: "lib\\cauca-menu-sidebar\\cauca-menu-sidebar.component.ts", lineNumber: 9 }); })();
 
 const _c0 = ["container"];
 function CaucaSlideshowComponent_div_2_Template(rf, ctx) { if (rf & 1) {
@@ -768,7 +768,7 @@ class CaucaSlideshowComponent {
         }], images: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSlideshowComponent, { className: "CaucaSlideshowComponent", filePath: "lib/cauca-slideshow/cauca-slideshow.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSlideshowComponent, { className: "CaucaSlideshowComponent", filePath: "lib\\cauca-slideshow\\cauca-slideshow.component.ts", lineNumber: 33 }); })();
 
 class CaucaMaterialModule {
     static { this.ɵfac = function CaucaMaterialModule_Factory(t) { return new (t || CaucaMaterialModule)(); }; }
@@ -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;
@@ -902,11 +932,13 @@ class DialogDateTimePickerComponent {
         this.selectedHour = 0;
         this.selectedMinute = 0;
         this.selectedSecond = 0;
-        this.initialDate = new Date();
+        this.initialDate = null;
         this.selectedDate = null;
         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);
     }
@@ -964,11 +998,20 @@ class DialogDateTimePickerComponent {
         this.selectedSecond = second;
         this.selectedDate.setSeconds(second);
     }
+    clear() {
+        this.dialogRef.close({
+            value: null
+        });
+    }
     cancel() {
-        this.dialogRef.close(null);
+        this.dialogRef.close({
+            value: this.initialDate
+        });
     }
     confirm() {
-        this.dialogRef.close(this.selectedDate);
+        this.dialogRef.close({
+            value: this.selectedDate
+        });
     }
     hourOfSelectedDateIsDisabled(hour) {
         if (this.selectedDateIsTheMinimumDate()) {
@@ -1003,9 +1046,10 @@ class DialogDateTimePickerComponent {
         return false;
     }
     initialEachComponentValue(options) {
-        this.initialDate = options.selectedDate ? new Date(options.selectedDate) : new Date();
+        this.initialDate = options.selectedDate ? new Date(options.selectedDate) : null;
         this.minimumDate = options.minimumDate ? new Date(options.minimumDate) : null;
         this.maximumDate = options.maximumDate ? new Date(options.maximumDate) : null;
+        this.selectedDate = options.selectedDate ? new Date(options.selectedDate) : new Date();
         this.dateChanged(options.selectedDate ? new Date(options.selectedDate) : null);
         this.hourChanged(options.selectedDate ? new Date(options.selectedDate).getHours() : 0);
         this.minuteChanged(options.selectedDate ? new Date(options.selectedDate).getMinutes() : 0);
@@ -1029,28 +1073,32 @@ 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: 20, vars: 6, 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-icon-button", "", 3, "click"], ["mat-icon-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.cancel(); });
-            i0.ɵɵelementStart(15, "mat-icon");
-            i0.ɵɵtext(16, "cancel");
+            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", 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()();
-            i0.ɵɵelementStart(17, "button", 9);
-            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_17_listener() { return ctx.confirm(); });
-            i0.ɵɵelementStart(18, "mat-icon");
-            i0.ɵɵtext(19, "check");
-            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("minDate", ctx.minimumDate)("maxDate", ctx.maximumDate)("selected", ctx.selectedDate);
@@ -1064,8 +1112,17 @@ class DialogDateTimePickerComponent {
             i0.ɵɵrepeater(ctx.minutes);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.showSeconds);
-        } }, dependencies: [CommonModule, i2.NgIf, CaucaCoreForChildModule,
-            MatButtonModule, i3.MatIconButton, MatDatepickerModule, i4$1.MatCalendar, MatIconModule, i5.MatIcon, MatListModule, i6$1.MatList, i6$1.MatListItem, MatNativeDateModule], styles: ["div[mat-dialog-actions][_ngcontent-%COMP%]{padding:10px 0;border-top:1px solid #ccc}.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,
@@ -1077,15 +1134,16 @@ 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-icon-button (click)=\"cancel()\"><mat-icon>cancel</mat-icon></button>\n    <button mat-icon-button cdkFocusInitial (click)=\"confirm()\"><mat-icon>check</mat-icon></button>\n</div>", styles: ["div[mat-dialog-actions]{padding:10px 0;border-top:1px solid #ccc}.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]
             }] }], null); })();
-(() => { (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 }); })();
+(() => { (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 }); })();
 
 class CaucaDateTimePickerComponent {
-    constructor(dialog, datePipe) {
+    constructor(elementRef, dialog, datePipe) {
+        this.elementRef = elementRef;
         this.dialog = dialog;
         this.datePipe = datePipe;
         this.stepHours = 1;
@@ -1095,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 = '';
     }
@@ -1105,36 +1165,55 @@ class CaucaDateTimePickerComponent {
         }
     }
     showDialog() {
-        const options = {
+        const dialogRef = this.dialog.open(DialogDateTimePickerComponent, {
+            position: this.getDialogPosition(),
+            data: this.getDateTimePickerOptions(),
+        });
+        dialogRef.afterClosed().subscribe((data) => {
+            if (data) {
+                this.stringDate = this.stringifyDate(data.value);
+                this.selectedDate = data.value;
+                this.selectedChange.emit(data.value);
+            }
+        });
+    }
+    getDateTimePickerOptions() {
+        return {
             selectedDate: this.selectedDate,
             minimumDate: this.minimumDate,
             maximumDate: this.maximumDate,
             showSeconds: this.showSeconds,
+            showClearButton: this.showClearButton,
+            showButtonIcons: this.showButtonIcons,
             step: {
                 hours: this.stepHours,
                 minutes: this.stepMinutes,
                 seconds: this.stepSecondes,
             }
         };
-        const dialogRef = this.dialog.open(DialogDateTimePickerComponent, {
-            data: options,
-        });
-        dialogRef.afterClosed().subscribe((date) => {
-            this.stringDate = this.stringifyDate(date);
-            this.selectedDate = date;
-            this.selectedChange.emit(date);
-        });
     }
     stringifyDate(date) {
         return this.datePipe.transform(date, this.showFormat);
     }
-    static { this.ɵfac = function CaucaDateTimePickerComponent_Factory(t) { return new (t || CaucaDateTimePickerComponent)(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([
+    getDialogPosition() {
+        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`,
+        } : {
+            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", showClearButton: "showClearButton", showButtonIcons: "showButtonIcons", value: "value" }, outputs: { selectedChange: "selectedChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([
                 DatePipe,
-            ]), i0.ɵɵStandaloneFeature], decls: 5, vars: 1, consts: [[1, "example-full-width"], ["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", 0);
-            i0.ɵɵelement(1, "input", 1);
-            i0.ɵɵelementStart(2, "button", 2);
+            ]), 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");
+            i0.ɵɵelement(1, "input", 0);
+            i0.ɵɵelementStart(2, "button", 1);
             i0.ɵɵlistener("click", function CaucaDateTimePickerComponent_Template_button_click_2_listener() { return ctx.showDialog(); });
             i0.ɵɵelementStart(3, "mat-icon");
             i0.ɵɵtext(4, "calendar_month");
@@ -1142,7 +1221,7 @@ class CaucaDateTimePickerComponent {
         } if (rf & 2) {
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("value", ctx.stringDate);
-        } }, dependencies: [MatButtonModule, i3.MatIconButton, MatIconModule, i5.MatIcon, MatInputModule, i5$1.MatInput, i4.MatFormField, i4.MatSuffix] }); }
+        } }, 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%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaDateTimePickerComponent, [{
         type: Component,
@@ -1152,8 +1231,8 @@ class CaucaDateTimePickerComponent {
                     MatInputModule,
                 ], providers: [
                     DatePipe,
-                ], template: "<mat-form-field class=\"example-full-width\">\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>" }]
-    }], () => [{ type: i1$1.MatDialog }, { type: i2.DatePipe }], { stepHours: [{
+                ], 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"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: i2.DatePipe }], { stepHours: [{
             type: Input
         }], stepMinutes: [{
             type: Input
@@ -1167,12 +1246,16 @@ class CaucaDateTimePickerComponent {
             type: Input
         }], showFormat: [{
             type: Input
+        }], showClearButton: [{
+            type: Input
+        }], showButtonIcons: [{
+            type: Input
         }], selectedChange: [{
             type: Output
         }], value: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaDateTimePickerComponent, { className: "CaucaDateTimePickerComponent", filePath: "lib/cauca-date-time-picker/cauca-date-time-picker.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaDateTimePickerComponent, { className: "CaucaDateTimePickerComponent", filePath: "lib\\cauca-date-time-picker\\cauca-date-time-picker.component.ts", lineNumber: 24 }); })();
 
 class MenuItem {
     constructor(label, path, icon = '') {