@cauca-911/material 17.1.4 → 17.1.6

package/fesm2022/cauca-911-material.mjs

@@ -27,7 +27,7 @@ import { style, state, animate, transition, trigger } from '@angular/animations'
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i7 from '@angular/material/list';
+import * as i1$4 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() {
@@ -118,9 +118,9 @@ 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"];
+const _c0$3 = ["file"];
 function CaucaInputFileComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
     i0.ɵɵtext(1);
@@ -220,7 +220,7 @@ class CaucaInputFileComponent {
     }
     static { this.ɵfac = function CaucaInputFileComponent_Factory(t) { return new (t || CaucaInputFileComponent)(i0.ɵɵdirectiveInject(i1$2.TranslateService), i0.ɵɵdirectiveInject(i1$1.MatDialog)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaInputFileComponent, selectors: [["cauca-input-file"]], viewQuery: function CaucaInputFileComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$2, 5);
+            i0.ɵɵviewQuery(_c0$3, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.file = _t.first);
@@ -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");
@@ -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);
@@ -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();
@@ -514,7 +514,7 @@ function CaucaMenuSidebarComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.version);
 } }
-const _c0$1 = [[["", "header", ""]], [["", "beforeMenu", ""]], [["", "afterMenu", ""]], [["", "footer", ""]]];
+const _c0$2 = [[["", "header", ""]], [["", "beforeMenu", ""]], [["", "afterMenu", ""]], [["", "footer", ""]]];
 const _c1 = ["[header]", "[beforeMenu]", "[afterMenu]", "[footer]"];
 class CaucaMenuSidebarComponent {
     constructor(element) {
@@ -595,7 +595,7 @@ class CaucaMenuSidebarComponent {
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaMenuSidebarComponent, selectors: [["cauca-menu-sidebar"]], hostBindings: function CaucaMenuSidebarComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("resize", function CaucaMenuSidebarComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
         } }, inputs: { menuItems: "menuItems", version: "version" }, ngContentSelectors: _c1, decls: 13, vars: 2, consts: [[1, "header"], ["mat-icon-button", "", 1, "close", 3, "click"], [1, "content"], [3, "menuItems", "itemClick"], ["menu", ""], [1, "footer"], ["class", "version", 4, "ngIf"], [1, "version"], [1, "double-arrow", 3, "click"], [1, "full"], [1, "abbr"]], template: function CaucaMenuSidebarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1);
+            i0.ɵɵprojectionDef(_c0$2);
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵlistener("click", function CaucaMenuSidebarComponent_Template_button_click_1_listener() { return ctx.hideOnMobile(); });
             i0.ɵɵelementStart(2, "mat-icon");
@@ -632,9 +632,9 @@ 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"];
+const _c0$1 = ["container"];
 function CaucaSlideshowComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
     i0.ɵɵelement(1, "img", 3);
@@ -696,7 +696,7 @@ class CaucaSlideshowComponent {
     }
     static { this.ɵfac = function CaucaSlideshowComponent_Factory(t) { return new (t || CaucaSlideshowComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaSlideshowComponent, selectors: [["cauca-slideshow"]], viewQuery: function CaucaSlideshowComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 7);
+            i0.ɵɵviewQuery(_c0$1, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
@@ -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)(); }; }
@@ -845,82 +845,213 @@ class CaucaMaterialModule {
         CaucaSimpleDialogComponent,
         CaucaSlideshowComponent] }); })();
 
-function DialogDateTimePickerComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    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)); });
+class MobileTimePickerComponent {
+    constructor() {
+        this.valueChange = new EventEmitter();
+    }
+    valueUp() {
+        const currentIndex = this.options.indexOf(this.value);
+        let newValue = 0;
+        if (currentIndex === this.options.length - 1) {
+            newValue = this.options[0];
+        }
+        else {
+            newValue = this.options[currentIndex + 1];
+        }
+        this.valueChange.emit(newValue);
+    }
+    valueDown() {
+        const currentIndex = this.options.indexOf(this.value);
+        let newValue = 0;
+        if (currentIndex === 0) {
+            newValue = this.options[this.options.length - 1];
+        }
+        else {
+            newValue = this.options[currentIndex - 1];
+        }
+        this.valueChange.emit(newValue);
+    }
+    static { this.ɵfac = function MobileTimePickerComponent_Factory(t) { return new (t || MobileTimePickerComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileTimePickerComponent, selectors: [["cauca-mobile-time-picker"]], inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 8, vars: 1, consts: [["mat-icon-button", "", 3, "click"]], template: function MobileTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function MobileTimePickerComponent_Template_button_click_0_listener() { return ctx.valueUp(); });
+            i0.ɵɵelementStart(1, "mat-icon");
+            i0.ɵɵtext(2, "keyboard_arrow_up");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(3, "div");
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 0);
+            i0.ɵɵlistener("click", function MobileTimePickerComponent_Template_button_click_5_listener() { return ctx.valueDown(); });
+            i0.ɵɵelementStart(6, "mat-icon");
+            i0.ɵɵtext(7, "keyboard_arrow_down");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("\n", (ctx.value < 10 ? "0" : "") + ctx.value, "\n");
+        } }, dependencies: [MatButtonModule, i4.MatIconButton, MatIconModule, i5.MatIcon, MatFormFieldModule,
+            MatInputModule], styles: ["[_nghost-%COMP%]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70px;font-family:var(--mat-form-field-container-text-font)}.mat-mdc-icon-button[_ngcontent-%COMP%]{height:24px;width:24px;line-height:24px;padding:0}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MobileTimePickerComponent, [{
+        type: Component,
+        args: [{ selector: 'cauca-mobile-time-picker', standalone: true, imports: [
+                    MatButtonModule,
+                    MatIconModule,
+                    MatFormFieldModule,
+                    MatInputModule
+                ], template: "<button mat-icon-button (click)=\"valueUp()\">\n    <mat-icon>keyboard_arrow_up</mat-icon>\n</button>\n<div>\n{{(value < 10 ? '0' : '' ) + value}}\n</div>\n<button mat-icon-button (click)=\"valueDown()\">\n    <mat-icon>keyboard_arrow_down</mat-icon>\n</button>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70px;font-family:var(--mat-form-field-container-text-font)}.mat-mdc-icon-button{height:24px;width:24px;line-height:24px;padding:0}\n"] }]
+    }], null, { value: [{
+            type: Input,
+            args: [{ required: true }]
+        }], options: [{
+            type: Input,
+            args: [{ required: true }]
+        }], valueChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileTimePickerComponent, { className: "MobileTimePickerComponent", filePath: "lib\\cauca-date-time-picker\\components\\mobile-time-picker\\mobile-time-picker.component.ts", lineNumber: 19 }); })();
+
+function DesktopTimePickerComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 1);
+    i0.ɵɵlistener("click", function DesktopTimePickerComponent_For_2_Template_mat_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const option_r1 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.valueChange.emit(option_r1)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const hour_r6 = ctx.$implicit;
+    const option_r1 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activated", ctx_r0.selectedHour === hour_r6)("disabled", ctx_r0.disabled.someHours.includes(hour_r6));
+    i0.ɵɵproperty("activated", ctx_r0.value === option_r1)("disabled", ctx_r0.disabled.someOptions.includes(option_r1));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((hour_r6 < 10 ? "0" : "") + hour_r6);
+    i0.ɵɵtextInterpolate((option_r1 < 10 ? "0" : "") + option_r1);
 } }
-function DialogDateTimePickerComponent_For_11_Template(rf, ctx) { if (rf & 1) {
-    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();
+class DesktopTimePickerComponent {
+    constructor() {
+        this.valueChange = new EventEmitter();
+    }
+    static { this.ɵfac = function DesktopTimePickerComponent_Factory(t) { return new (t || DesktopTimePickerComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DesktopTimePickerComponent, selectors: [["cauca-desktop-time-picker"]], inputs: { options: "options", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 3, vars: 1, consts: [[3, "disabled"], [3, "activated", "disabled", "click"], [3, "activated", "disabled"]], template: function DesktopTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-list", 0);
+            i0.ɵɵrepeaterCreate(1, DesktopTimePickerComponent_For_2_Template, 2, 3, "mat-list-item", 2, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("disabled", ctx.disabled.all);
+            i0.ɵɵadvance(1);
+            i0.ɵɵrepeater(ctx.options);
+        } }, dependencies: [MatListModule, i1$4.MatList, i1$4.MatListItem], styles: ["mat-list[_ngcontent-%COMP%]{width:50px;padding:0}mat-list[_ngcontent-%COMP%]   .mat-mdc-list-item[_ngcontent-%COMP%]:not(.mat-mdc-list-item-interactive){cursor:pointer} > div[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}  .mdc-list-item__primary-text{font-family:var(--mat-datepicker-calendar-text-font);font-size:var(--mat-datepicker-calendar-text-size)}  .mdc-list-item--activated{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color)}  .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(DesktopTimePickerComponent, [{
+        type: Component,
+        args: [{ selector: 'cauca-desktop-time-picker', standalone: true, imports: [
+                    MatListModule
+                ], template: "<mat-list [disabled]=\"disabled.all\">\n    @for (option of options; track option) {\n    <mat-list-item [activated]=\"value === option\" [disabled]=\"disabled.someOptions.includes(option)\"\n        (click)=\"valueChange.emit(option)\">{{(option < 10 ? '0' : '' ) + option}}</mat-list-item>\n            }\n</mat-list>", styles: ["mat-list{width:50px;padding:0}mat-list .mat-mdc-list-item:not(.mat-mdc-list-item-interactive){cursor:pointer}>div::-webkit-scrollbar{display:none}::ng-deep .mdc-list-item__primary-text{font-family:var(--mat-datepicker-calendar-text-font);font-size:var(--mat-datepicker-calendar-text-size)}::ng-deep .mdc-list-item--activated{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color)}::ng-deep .mdc-list-item--activated .mdc-list-item__primary-text{color:var(--mat-datepicker-calendar-date-selected-state-text-color)}\n"] }]
+    }], null, { options: [{
+            type: Input
+        }], value: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], valueChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesktopTimePickerComponent, { className: "DesktopTimePickerComponent", filePath: "lib\\cauca-date-time-picker\\components\\desktop-time-picker\\desktop-time-picker.component.ts", lineNumber: 13 }); })();
+
+const _c0 = (a0, a1) => ({ all: a0, someOptions: a1 });
+function DialogDateTimePickerComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "cauca-desktop-time-picker", 15);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_4_Template_cauca_desktop_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.hourChanged($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0, ctx_r0.disabled.hours, ctx_r0.disabled.someHours))("options", ctx_r0.hours)("value", ctx_r0.selectedHour);
+} }
+function DialogDateTimePickerComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "cauca-mobile-time-picker", 16);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_5_Template_cauca_mobile_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.hourChanged($event)); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const minute_r13 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activated", ctx_r1.selectedMinute === minute_r13)("disabled", ctx_r1.disabled.someMinutes.includes(minute_r13));
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((minute_r13 < 10 ? "0" : "") + minute_r13);
+    i0.ɵɵproperty("options", ctx_r1.hours)("value", ctx_r1.selectedHour);
 } }
-function DialogDateTimePickerComponent_div_12_For_3_Template(rf, ctx) { if (rf & 1) {
-    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);
+function DialogDateTimePickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵtext(1, ":");
     i0.ɵɵelementEnd();
+} }
+function DialogDateTimePickerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "cauca-desktop-time-picker", 15);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_7_Template_cauca_desktop_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.minuteChanged($event)); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    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));
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate((second_r21 < 10 ? "0" : "") + second_r21);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0, ctx_r3.disabled.minutes, ctx_r3.disabled.someMinutes))("options", ctx_r3.minutes)("value", ctx_r3.selectedMinute);
 } }
-function DialogDateTimePickerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    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);
+function DialogDateTimePickerComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "cauca-mobile-time-picker", 16);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_8_Template_cauca_mobile_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.minuteChanged($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("disabled", ctx_r2.disabled.seconds);
+    i0.ɵɵproperty("options", ctx_r4.minutes)("value", ctx_r4.selectedMinute);
+} }
+function DialogDateTimePickerComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵtext(1, ":");
+    i0.ɵɵelementEnd();
+} }
+function DialogDateTimePickerComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "cauca-desktop-time-picker", 15);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_10_Template_cauca_desktop_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.secondChanged($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0, ctx_r6.disabled.seconds, ctx_r6.disabled.someSeconds))("options", ctx_r6.seconds)("value", ctx_r6.selectedSecond);
+} }
+function DialogDateTimePickerComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "cauca-mobile-time-picker", 16);
+    i0.ɵɵlistener("valueChange", function DialogDateTimePickerComponent_div_11_Template_cauca_mobile_time_picker_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r21.secondChanged($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵrepeater(ctx_r2.seconds);
+    i0.ɵɵproperty("options", ctx_r7.seconds)("value", ctx_r7.selectedSecond);
 } }
-function DialogDateTimePickerComponent_button_14_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
+function DialogDateTimePickerComponent_button_13_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);
+function DialogDateTimePickerComponent_button_13_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function DialogDateTimePickerComponent_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.clear()); });
+    i0.ɵɵtemplate(1, DialogDateTimePickerComponent_button_13_mat_icon_1_Template, 2, 0, "mat-icon", 12);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
+    const ctx_r8 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r3.showButtonIcons);
+    i0.ɵɵproperty("ngIf", ctx_r8.showButtonIcons);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "material.clear"), " ");
 } }
-function DialogDateTimePickerComponent_mat_icon_16_Template(rf, ctx) { if (rf & 1) {
+function DialogDateTimePickerComponent_mat_icon_15_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) {
+function DialogDateTimePickerComponent_mat_icon_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
     i0.ɵɵtext(1, "check");
     i0.ɵɵelementEnd();
@@ -942,6 +1073,7 @@ class DialogDateTimePickerComponent {
         this.hours = [...Array(24).keys()];
         this.minutes = [...Array(60).keys()];
         this.seconds = [...Array(60).keys()];
+        this.showMobileUi = false;
         this.disabled = {
             hours: true,
             someHours: [],
@@ -962,6 +1094,12 @@ class DialogDateTimePickerComponent {
         this.setListHoursMinutes();
         this.initialEachComponentValue(options);
     }
+    ngOnInit() {
+        this.onWindowWithChange(window.innerWidth);
+    }
+    onResize(event) {
+        this.onWindowWithChange(event.target.innerWidth);
+    }
     dateChanged(date) {
         if (date) {
             this.selectedDate = date;
@@ -1013,6 +1151,9 @@ class DialogDateTimePickerComponent {
             value: this.selectedDate
         });
     }
+    onWindowWithChange(width) {
+        this.showMobileUi = width && width <= 555;
+    }
     hourOfSelectedDateIsDisabled(hour) {
         if (this.selectedDateIsTheMinimumDate()) {
             return hour < this.minimumDate.getHours();
@@ -1073,56 +1214,63 @@ 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: 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);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DialogDateTimePickerComponent, selectors: [["cauca-dialog-date-time-picker"]], hostBindings: function DialogDateTimePickerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function DialogDateTimePickerComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
+        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 22, vars: 21, consts: [["mat-dialog-content", ""], [1, "date-time-picker", 3, "ngClass"], [1, "calendar"], [3, "minDate", "maxDate", "selected", "selectedChange"], ["class", "hours", 4, "ngIf"], ["class", "hour-and-minute-separator", 4, "ngIf"], ["class", "minutes", 4, "ngIf"], ["class", "minute-and-second-separator", 4, "ngIf"], ["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"], [1, "hours"], [3, "disabled", "options", "value", "valueChange"], [3, "options", "value", "valueChange"], [1, "hour-and-minute-separator"], [1, "minutes"], [1, "minute-and-second-separator"], [1, "seconds"]], template: function DialogDateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "mat-calendar", 3);
             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", 14, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵtemplate(4, DialogDateTimePickerComponent_div_4_Template, 2, 6, "div", 4)(5, DialogDateTimePickerComponent_div_5_Template, 2, 2, "div", 4)(6, DialogDateTimePickerComponent_div_6_Template, 2, 0, "div", 5)(7, DialogDateTimePickerComponent_div_7_Template, 2, 6, "div", 6)(8, DialogDateTimePickerComponent_div_8_Template, 2, 2, "div", 6)(9, DialogDateTimePickerComponent_div_9_Template, 2, 0, "div", 7)(10, DialogDateTimePickerComponent_div_10_Template, 2, 6, "div", 8)(11, DialogDateTimePickerComponent_div_11_Template, 2, 2, "div", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "div", 5)(9, "mat-list", 4);
-            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);
-            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.ɵɵelementStart(12, "div", 9);
+            i0.ɵɵtemplate(13, DialogDateTimePickerComponent_button_13_Template, 4, 4, "button", 10);
+            i0.ɵɵelementStart(14, "button", 11);
+            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_14_listener() { return ctx.cancel(); });
+            i0.ɵɵtemplate(15, DialogDateTimePickerComponent_mat_icon_15_Template, 2, 0, "mat-icon", 12);
+            i0.ɵɵtext(16);
+            i0.ɵɵpipe(17, "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.ɵɵelementStart(18, "button", 13);
+            i0.ɵɵlistener("click", function DialogDateTimePickerComponent_Template_button_click_18_listener() { return ctx.confirm(); });
+            i0.ɵɵtemplate(19, DialogDateTimePickerComponent_mat_icon_19_Template, 2, 0, "mat-icon", 12);
+            i0.ɵɵtext(20);
+            i0.ɵɵpipe(21, "translate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("minDate", ctx.minimumDate)("maxDate", ctx.maximumDate)("selected", ctx.selectedDate);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngClass", ctx.showSeconds ? "show-seconds" : "hide-seconds");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", ctx.disabled.hours);
+            i0.ɵɵproperty("minDate", ctx.minimumDate)("maxDate", ctx.maximumDate)("selected", ctx.selectedDate);
             i0.ɵɵadvance(1);
-            i0.ɵɵrepeater(ctx.hours);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("disabled", ctx.disabled.minutes);
+            i0.ɵɵproperty("ngIf", !ctx.showMobileUi);
             i0.ɵɵadvance(1);
-            i0.ɵɵrepeater(ctx.minutes);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.showSeconds);
+            i0.ɵɵproperty("ngIf", ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.showSeconds && ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.showSeconds && !ctx.showMobileUi);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.showSeconds && ctx.showMobileUi);
             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.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 17, "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)}"] }); }
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 19, "material.ok"), " ");
+        } }, dependencies: [CommonModule, i2.NgClass, i2.NgIf, CaucaCoreForChildModule, i1.TranslatePipe, MatButtonModule, i4.MatButton, MatDatepickerModule, i5$2.MatCalendar, MatIconModule, i5.MatIcon, MatListModule,
+            MatNativeDateModule,
+            MobileTimePickerComponent,
+            DesktopTimePickerComponent], 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:grid;grid-template-areas:\"calendar hours minutes seconds\";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%]: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;height:350px}.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)}.calendar[_ngcontent-%COMP%]{grid-area:calendar}.hours[_ngcontent-%COMP%]{grid-area:hours}.minutes[_ngcontent-%COMP%]{grid-area:minutes}.seconds[_ngcontent-%COMP%]{grid-area:seconds}.hour-and-minute-separator[_ngcontent-%COMP%]{grid-area:hour-and-minute-separator;display:flex;align-items:center;justify-content:center;font-weight:700}.minute-and-second-separator[_ngcontent-%COMP%]{grid-area:minute-and-second-separator;display:flex;align-items:center;justify-content:center;font-weight:700}@media only screen and (max-width: 555px){.show-seconds[_ngcontent-%COMP%]{grid-template-areas:\"calendar calendar calendar calendar calendar calendar calendar\" \". hours hour-and-minute-separator minutes minute-and-second-separator seconds .\";grid-template-columns:auto 40px 2px 40px 2px 40px auto}.hide-seconds[_ngcontent-%COMP%]{grid-template-areas:\"calendar calendar calendar calendar calendar\" \". hours hour-and-minute-separator minutes .\";grid-template-columns:auto 40px 2px 40px auto}.date-time-picker[_ngcontent-%COMP%]{grid-template-rows:auto auto;height:450px}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{border-left:none}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:not(:first-child){height:70px}.date-time-picker[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:first-child{overflow:initial;flex:4;max-width:290px;border-left:none}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogDateTimePickerComponent, [{
         type: Component,
@@ -1134,12 +1282,17 @@ 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\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"] }]
+                    MobileTimePickerComponent,
+                    DesktopTimePickerComponent
+                ], template: "<div mat-dialog-content>\n    <div [ngClass]=\"showSeconds ? 'show-seconds' : 'hide-seconds'\" class=\"date-time-picker\">\n        <div class=\"calendar\">\n            <mat-calendar\n                [minDate]=\"minimumDate\"\n                [maxDate]=\"maximumDate\"\n                [selected]=\"selectedDate\"\n                (selectedChange)=\"dateChanged($event)\"\n            ></mat-calendar>\n        </div>\n\n        <div class=\"hours\" *ngIf=\"!showMobileUi\">\n            <cauca-desktop-time-picker [disabled]=\"{all: disabled.hours, someOptions: disabled.someHours}\" (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\"/>\n        </div>\n        <div class=\"hours\" *ngIf=\"showMobileUi\">\n            <cauca-mobile-time-picker (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\" />\n        </div>\n\n        <div class=\"hour-and-minute-separator\" *ngIf=\"showMobileUi\">:</div>\n\n        <div class=\"minutes\" *ngIf=\"!showMobileUi\">\n            <cauca-desktop-time-picker [disabled]=\"{all: disabled.minutes, someOptions: disabled.someMinutes}\" (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\"/>\n        </div>\n        <div class=\"minutes\" *ngIf=\"showMobileUi\">\n            <cauca-mobile-time-picker (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\" />\n        </div>\n\n        <div class=\"minute-and-second-separator\" *ngIf=\"showSeconds && showMobileUi\">:</div>\n        <div class=\"seconds\" *ngIf=\"showSeconds && !showMobileUi\">\n            <cauca-desktop-time-picker [disabled]=\"{all: disabled.seconds, someOptions: disabled.someSeconds}\" (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\"/>\n        </div>\n        <div class=\"seconds\" *ngIf=\"showSeconds && showMobileUi\">\n            <cauca-mobile-time-picker (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\" />\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:grid;grid-template-areas:\"calendar hours minutes seconds\";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:first-child{flex:4;max-width:290px;border-left:none}.date-time-picker>div:first-child mat-calendar{width:290px;height:350px}.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)}.calendar{grid-area:calendar}.hours{grid-area:hours}.minutes{grid-area:minutes}.seconds{grid-area:seconds}.hour-and-minute-separator{grid-area:hour-and-minute-separator;display:flex;align-items:center;justify-content:center;font-weight:700}.minute-and-second-separator{grid-area:minute-and-second-separator;display:flex;align-items:center;justify-content:center;font-weight:700}@media only screen and (max-width: 555px){.show-seconds{grid-template-areas:\"calendar calendar calendar calendar calendar calendar calendar\" \". hours hour-and-minute-separator minutes minute-and-second-separator seconds .\";grid-template-columns:auto 40px 2px 40px 2px 40px auto}.hide-seconds{grid-template-areas:\"calendar calendar calendar calendar calendar\" \". hours hour-and-minute-separator minutes .\";grid-template-columns:auto 40px 2px 40px auto}.date-time-picker{grid-template-rows:auto auto;height:450px}.date-time-picker>div{border-left:none}.date-time-picker>div:not(:first-child){height:70px}.date-time-picker>div:first-child{overflow:initial;flex:4;max-width:290px;border-left:none}}\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 }); })();
+            }] }], { onResize: [{
+            type: HostListener,
+            args: ['window:resize', ['$event']]
+        }] }); })();
+(() => { (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: 31 }); })();
 
 class CaucaDateTimePickerComponent {
     constructor(elementRef, dialog, datePipe) {
@@ -1263,7 +1416,7 @@ class CaucaDateTimePickerComponent {
         }], 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 = '') {