@cauca-911/material 21.2.6 → 21.2.8

package/fesm2022/cauca-911-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, ChangeDetectionStrategy, Component, input, output, signal, inject, HostListener, model, computed, Injector, ElementRef, Directive, forwardRef, TemplateRef, Input, Optional, Self, ContentChild, ViewChild, resource, effect, contentChildren, NgModule, Pipe, EventEmitter, Output } from '@angular/core';
+import { Injectable, ChangeDetectionStrategy, Component, input, output, signal, inject, HostListener, model, computed, Injector, ElementRef, Directive, forwardRef, TemplateRef, Input, Optional, Self, ContentChild, ViewChild, resource, effect, DestroyRef, contentChild, contentChildren, ViewEncapsulation, NgModule, Pipe, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate/core';
 import * as i1$5 from '@angular/material/dialog';
@@ -24,7 +24,7 @@ import * as i1$6 from '@angular/forms';
 import { Validators, NgControl, FormControlName, ControlContainer, FormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder, ReactiveFormsModule, FormsModule, FormGroup, NgForm, FormGroupDirective, FormControlDirective, UntypedFormControl } from '@angular/forms';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import { firstValueFrom, of, tap, mergeMap, catchError, finalize, throwError, filter, Subject, startWith, map, ReplaySubject, switchMap, EMPTY, combineLatest, distinctUntilChanged } from 'rxjs';
+import { firstValueFrom, of, tap, mergeMap, catchError, finalize, throwError, filter, Subject, startWith, map, fromEvent, ReplaySubject, switchMap, EMPTY, combineLatest, distinctUntilChanged } from 'rxjs';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i4 from '@angular/cdk/text-field';
@@ -42,7 +42,7 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i5 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import * as i1$9 from '@angular/router';
-import { RouterModule, Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { MatTabGroup, MatTab } from '@angular/material/tabs';
 
 class CaucaMaterialService {
@@ -130,7 +130,7 @@ class MobileTimePickerComponent {
                     MatIconModule,
                     MatFormFieldModule,
                     MatInputModule
-                ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button (click)=\"valueUp()\">\r\n    <mat-icon>keyboard_arrow_up</mat-icon>\r\n</button>\r\n<div>\r\n{{(value() < 10 ? '0' : '' ) + value()}}\r\n</div>\r\n<button mat-icon-button (click)=\"valueDown()\">\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n</button>\r\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: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileTimePickerComponent, { className: "MobileTimePickerComponent", filePath: "lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.ts", lineNumber: 19 }); })();
 
@@ -171,11 +171,11 @@ class DesktopTimePickerComponent {
         type: Component,
         args: [{ selector: 'cauca-desktop-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                ], template: "<mat-list [disabled]=\"disabled()?.all\">\r\n    @for (option of options(); track option) {\r\n    <mat-list-item [activated]=\"value() === option\" [disabled]=\"disabled()?.someOptions?.includes(option)\"\r\n        (click)=\"valueChange.emit(option)\">{{(option < 10 ? '0' : '' ) + option}}</mat-list-item>\r\n            }\r\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: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DesktopTimePickerComponent, { className: "DesktopTimePickerComponent", filePath: "lib/components/cauca-date-time-picker/components/desktop-time-picker/desktop-time-picker.component.ts", lineNumber: 13 }); })();
 
-const _c0$d = (a0, a1) => ({ all: a0, someOptions: a1 });
+const _c0$e = (a0, a1) => ({ all: a0, someOptions: a1 });
 function DialogDateTimePickerComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 8)(1, "cauca-desktop-time-picker", 13);
@@ -184,7 +184,7 @@ function DialogDateTimePickerComponent_Conditional_4_Conditional_0_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$d, ctx_r1.disabled.hours, ctx_r1.disabled.someHours))("options", ctx_r1.hours)("value", ctx_r1.selectedHour);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$e, ctx_r1.disabled.hours, ctx_r1.disabled.someHours))("options", ctx_r1.hours)("value", ctx_r1.selectedHour);
 } }
 function DialogDateTimePickerComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -209,7 +209,7 @@ function DialogDateTimePickerComponent_Conditional_4_Conditional_3_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$d, ctx_r1.disabled.minutes, ctx_r1.disabled.someMinutes))("options", ctx_r1.minutes)("value", ctx_r1.selectedMinute);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$e, ctx_r1.disabled.minutes, ctx_r1.disabled.someMinutes))("options", ctx_r1.minutes)("value", ctx_r1.selectedMinute);
 } }
 function DialogDateTimePickerComponent_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -234,7 +234,7 @@ function DialogDateTimePickerComponent_Conditional_4_Conditional_6_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$d, ctx_r1.disabled.seconds, ctx_r1.disabled.someSeconds))("options", ctx_r1.seconds)("value", ctx_r1.selectedSecond);
+    i0.ɵɵproperty("disabled", i0.ɵɵpureFunction2(3, _c0$e, ctx_r1.disabled.seconds, ctx_r1.disabled.someSeconds))("options", ctx_r1.seconds)("value", ctx_r1.selectedSecond);
 } }
 function DialogDateTimePickerComponent_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -519,7 +519,7 @@ class DialogDateTimePickerComponent {
                     MatListModule,
                     MobileTimePickerComponent,
                     DesktopTimePickerComponent
-                ], providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, 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    @if (showTime()) {\n      @if (!showMobileUi) {\n        <div class=\"hours\">\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.hours, someOptions: disabled.someHours}\" (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\"/>\n        </div>\n      }\n      @if (showMobileUi) {\n        <div class=\"hours\">\n          <cauca-mobile-time-picker (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\" />\n        </div>\n      }\n\n      @if (showMobileUi) {\n        <div class=\"hour-and-minute-separator\">:</div>\n      }\n\n      @if (!showMobileUi) {\n        <div class=\"minutes\">\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.minutes, someOptions: disabled.someMinutes}\" (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\"/>\n        </div>\n      }\n      @if (showMobileUi) {\n        <div class=\"minutes\">\n          <cauca-mobile-time-picker (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\" />\n        </div>\n      }\n\n      @if (showSeconds() && showMobileUi) {\n        <div class=\"minute-and-second-separator\">:</div>\n      }\n      @if (showSeconds() && !showMobileUi) {\n        <div class=\"seconds\">\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.seconds, someOptions: disabled.someSeconds}\" (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\"/>\n        </div>\n      }\n      @if (showSeconds() && showMobileUi) {\n        <div class=\"seconds\">\n          <cauca-mobile-time-picker (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n\n<div mat-dialog-actions align=\"end\">\n  @if (showClearButton) {\n    <button mat-stroked-button (click)=\"clear()\">\n      @if (showButtonIcons) {\n        <mat-icon>clear</mat-icon>\n      }\n      {{'material.clear' | translate}}\n    </button>\n  }\n  <button color=\"primary\" mat-stroked-button (click)=\"cancel()\">\n    @if (showButtonIcons) {\n      <mat-icon>cancel</mat-icon>\n    }\n    {{'material.cancel' | translate}}\n  </button>\n  <button color=\"primary\" mat-raised-button cdkFocusInitial (click)=\"confirm()\">\n    @if (showButtonIcons) {\n      <mat-icon>check</mat-icon>\n    }\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"] }]
+                ], providers: [provideNativeDateAdapter()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-content>\r\n  <div [ngClass]=\"showSeconds() ? 'show-seconds' : 'hide-seconds'\" class=\"date-time-picker\">\r\n    <div class=\"calendar\">\r\n      <mat-calendar\r\n        [minDate]=\"minimumDate\"\r\n        [maxDate]=\"maximumDate\"\r\n        [selected]=\"selectedDate\"\r\n        (selectedChange)=\"dateChanged($event)\"\r\n      ></mat-calendar>\r\n    </div>\r\n\r\n    @if (showTime()) {\r\n      @if (!showMobileUi) {\r\n        <div class=\"hours\">\r\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.hours, someOptions: disabled.someHours}\" (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\"/>\r\n        </div>\r\n      }\r\n      @if (showMobileUi) {\r\n        <div class=\"hours\">\r\n          <cauca-mobile-time-picker (valueChange)=\"hourChanged($event)\" [options]=\"hours\" [value]=\"selectedHour\" />\r\n        </div>\r\n      }\r\n\r\n      @if (showMobileUi) {\r\n        <div class=\"hour-and-minute-separator\">:</div>\r\n      }\r\n\r\n      @if (!showMobileUi) {\r\n        <div class=\"minutes\">\r\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.minutes, someOptions: disabled.someMinutes}\" (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\"/>\r\n        </div>\r\n      }\r\n      @if (showMobileUi) {\r\n        <div class=\"minutes\">\r\n          <cauca-mobile-time-picker (valueChange)=\"minuteChanged($event)\" [options]=\"minutes\" [value]=\"selectedMinute\" />\r\n        </div>\r\n      }\r\n\r\n      @if (showSeconds() && showMobileUi) {\r\n        <div class=\"minute-and-second-separator\">:</div>\r\n      }\r\n      @if (showSeconds() && !showMobileUi) {\r\n        <div class=\"seconds\">\r\n          <cauca-desktop-time-picker [disabled]=\"{all: disabled.seconds, someOptions: disabled.someSeconds}\" (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\"/>\r\n        </div>\r\n      }\r\n      @if (showSeconds() && showMobileUi) {\r\n        <div class=\"seconds\">\r\n          <cauca-mobile-time-picker (valueChange)=\"secondChanged($event)\" [options]=\"seconds\" [value]=\"selectedSecond\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<div mat-dialog-actions align=\"end\">\r\n  @if (showClearButton) {\r\n    <button mat-stroked-button (click)=\"clear()\">\r\n      @if (showButtonIcons) {\r\n        <mat-icon>clear</mat-icon>\r\n      }\r\n      {{'material.clear' | translate}}\r\n    </button>\r\n  }\r\n  <button color=\"primary\" mat-stroked-button (click)=\"cancel()\">\r\n    @if (showButtonIcons) {\r\n      <mat-icon>cancel</mat-icon>\r\n    }\r\n    {{'material.cancel' | translate}}\r\n  </button>\r\n  <button color=\"primary\" mat-raised-button cdkFocusInitial (click)=\"confirm()\">\r\n    @if (showButtonIcons) {\r\n      <mat-icon>check</mat-icon>\r\n    }\r\n    {{'material.ok' | translate}}\r\n  </button>\r\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"] }]
     }], () => [], { onResize: [{
             type: HostListener,
             args: ['window:resize', ['$event']]
@@ -677,7 +677,7 @@ class CaucaDateTimePickerComponent {
                         multi: true,
                         useExisting: CaucaDateTimePickerComponent,
                     }
-                ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    @if (label()) {\n        <mat-label>{{ translateLabel() ? (label() | translate) : label() }}{{isRequired() ? '*' : ''}}</mat-label>\n    }\n    <input (focusout)=\"onTouched()\" 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"] }]
+                ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\r\n    @if (label()) {\r\n        <mat-label>{{ translateLabel() ? (label() | translate) : label() }}{{isRequired() ? '*' : ''}}</mat-label>\r\n    }\r\n    <input (focusout)=\"onTouched()\" matInput [value]=\"stringDate()\" readonly=\"readonly\">\r\n    <button matSuffix mat-icon-button (click)=\"showDialog()\">\r\n        <mat-icon>calendar_month</mat-icon>\r\n    </button>\r\n</mat-form-field>", styles: [":host{display:block}mat-form-field{width:100%}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], subscriptSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptSizing", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], translateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateLabel", required: false }] }], stepHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepHours", required: false }] }], stepMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepMinutes", required: false }] }], stepSecondes: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepSecondes", required: false }] }], minimumDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumDate", required: false }] }], maximumDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumDate", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showButtonIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonIcons", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaDateTimePickerComponent, { className: "CaucaDateTimePickerComponent", filePath: "lib/components/cauca-date-time-picker/cauca-date-time-picker.component.ts", lineNumber: 34 }); })();
 
@@ -1082,7 +1082,7 @@ class ButtonComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-button', imports: [MatIconModule, MatButtonModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'basic') {\n  <button [ngClass]=\"class()\" mat-button (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-basic\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n    <span>{{label()}}</span>\n  </button>\n}\n\n@if (type() === 'raised') {\n  <button [ngClass]=\"class()\" matButton=\"elevated\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-raised\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n    <span>{{label()}}</span>\n  </button>\n}\n\n@if (type() === 'stroked') {\n  <button [ngClass]=\"class()\" matButton=\"outlined\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-stroked\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n    <span>{{label()}}</span>\n  </button>\n}\n\n@if (type() === 'flat') {\n  <button [ngClass]=\"class()\" matButton=\"filled\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-flat\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n    <span>{{label()}}</span>\n  </button>\n}\n\n@if (type() === 'icon') {\n  <button [ngClass]=\"class()\" matIconButton (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-icon\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n  </button>\n}\n\n@if (type() === 'fab') {\n  <button [ngClass]=\"class()\" matFab (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-icon\">\n    @if (inProgress() || icon()) {\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\n    }\n    <span>{{label()}}</span>\n  </button>\n}", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.button-spin{animation:spinner 1s linear infinite}\n"] }]
+        args: [{ selector: 'cauca-button', imports: [MatIconModule, MatButtonModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'basic') {\r\n  <button [ngClass]=\"class()\" mat-button (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-basic\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n    <span>{{label()}}</span>\r\n  </button>\r\n}\r\n\r\n@if (type() === 'raised') {\r\n  <button [ngClass]=\"class()\" matButton=\"elevated\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-raised\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n    <span>{{label()}}</span>\r\n  </button>\r\n}\r\n\r\n@if (type() === 'stroked') {\r\n  <button [ngClass]=\"class()\" matButton=\"outlined\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-stroked\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n    <span>{{label()}}</span>\r\n  </button>\r\n}\r\n\r\n@if (type() === 'flat') {\r\n  <button [ngClass]=\"class()\" matButton=\"filled\" (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-flat\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n    <span>{{label()}}</span>\r\n  </button>\r\n}\r\n\r\n@if (type() === 'icon') {\r\n  <button [ngClass]=\"class()\" matIconButton (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-icon\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n  </button>\r\n}\r\n\r\n@if (type() === 'fab') {\r\n  <button [ngClass]=\"class()\" matFab (click)=\"buttonClick.emit()\" [disabled]=\"disable() || inProgress()\" [color]=\"color()\" class=\"button-icon\">\r\n    @if (inProgress() || icon()) {\r\n      <mat-icon [class.button-spin]=\"inProgress()\">{{ inProgress() ? 'update' : icon() }}</mat-icon>\r\n    }\r\n    <span>{{label()}}</span>\r\n  </button>\r\n}", styles: ["@keyframes spinner{to{transform:rotate(360deg)}}.button-spin{animation:spinner 1s linear infinite}\n"] }]
     }], null, { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], inProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "inProgress", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ButtonComponent, { className: "ButtonComponent", filePath: "lib/components/button/button.component.ts", lineNumber: 13 }); })();
 
@@ -1393,7 +1393,7 @@ class AlertDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-alert-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RaisedButtonComponent, IconButtonComponent, MatDialogModule], template: "<div mat-dialog-title>\n  <div class=\"h6\">{{ title | translate }}</div>\n  <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\" />\n</div>\n<div class=\"alert-dialog-content\" mat-dialog-content>\n  <p>{{ message | translate }}</p>\n</div>\n<mat-dialog-actions align=\"end\">\n  <cauca-raised-button id=\"okButton\" label=\"ok\" color=\"primary\" (buttonClick)=\"closeClick()\" />\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.alert-dialog-content{white-space:pre-wrap}\n"] }]
+        args: [{ selector: 'cauca-alert-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RaisedButtonComponent, IconButtonComponent, MatDialogModule], template: "<div mat-dialog-title>\r\n  <div class=\"h6\">{{ title | translate }}</div>\r\n  <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\" />\r\n</div>\r\n<div class=\"alert-dialog-content\" mat-dialog-content>\r\n  <p>{{ message | translate }}</p>\r\n</div>\r\n<mat-dialog-actions align=\"end\">\r\n  <cauca-raised-button id=\"okButton\" label=\"ok\" color=\"primary\" (buttonClick)=\"closeClick()\" />\r\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.alert-dialog-content{white-space:pre-wrap}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertDialogComponent, { className: "AlertDialogComponent", filePath: "lib/components/dialogs/alert-dialog/alert-dialog.component.ts", lineNumber: 18 }); })();
 
@@ -1449,7 +1449,7 @@ class ConfirmDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-confirm-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatDialogModule, RaisedButtonComponent, StrokedButtonComponent, IconButtonComponent], template: "<div mat-dialog-title>\n    <div class=\"h6 title\">{{ title | translate: options.titleArgs }}</div>\n    <cauca-icon-button id=\"close-button\" (buttonClick)=\"cancelClick()\" icon=\"close\" />\n  </div>\n  <div mat-dialog-content>\n    <p class=\"message\">{{ message | translate: options.messageArgs }}</p>\n  </div>\n  <mat-dialog-actions align=\"end\" class=\"action-buttons\">\n    <cauca-stroked-button class=\"no-button\" [label]=\"options.noText\" [color]=\"options.noColor\" (buttonClick)=\"noClick()\" />\n    <cauca-raised-button class=\"yes-button\" [label]=\"options.yesText\" [color]=\"options.yesColor\" (buttonClick)=\"yesClick()\" />\n  </mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.yes-button{padding-left:8px}.message{white-space:pre-wrap}.title{padding-top:8px}.action-buttons{display:flex;align-items:center;flex-direction:row;gap:8px}\n"] }]
+        args: [{ selector: 'cauca-confirm-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatDialogModule, RaisedButtonComponent, StrokedButtonComponent, IconButtonComponent], template: "<div mat-dialog-title>\r\n    <div class=\"h6 title\">{{ title | translate: options.titleArgs }}</div>\r\n    <cauca-icon-button id=\"close-button\" (buttonClick)=\"cancelClick()\" icon=\"close\" />\r\n  </div>\r\n  <div mat-dialog-content>\r\n    <p class=\"message\">{{ message | translate: options.messageArgs }}</p>\r\n  </div>\r\n  <mat-dialog-actions align=\"end\" class=\"action-buttons\">\r\n    <cauca-stroked-button class=\"no-button\" [label]=\"options.noText\" [color]=\"options.noColor\" (buttonClick)=\"noClick()\" />\r\n    <cauca-raised-button class=\"yes-button\" [label]=\"options.yesText\" [color]=\"options.yesColor\" (buttonClick)=\"yesClick()\" />\r\n  </mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.yes-button{padding-left:8px}.message{white-space:pre-wrap}.title{padding-top:8px}.action-buttons{display:flex;align-items:center;flex-direction:row;gap:8px}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmDialogComponent, { className: "ConfirmDialogComponent", filePath: "lib/components/dialogs/confirm-dialog/confirm-dialog.component.ts", lineNumber: 20 }); })();
 
@@ -1575,7 +1575,7 @@ class TextInputDialogComponent {
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextInputDialogComponent, { className: "TextInputDialogComponent", filePath: "lib/components/dialogs/text-input-dialog/text-input-dialog.component.ts", lineNumber: 20 }); })();
 
-const _c0$c = a0 => ({ itemName: a0 });
+const _c0$d = a0 => ({ itemName: a0 });
 const _c1$2 = a0 => ({ itemType: a0 });
 function DeleteDialogComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -1635,16 +1635,16 @@ class DeleteDialogComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.itemGenderIsFemale ? 1 : 2);
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 2, "deleteDialog.message", i0.ɵɵpureFunction1(5, _c0$c, ctx.itemName)));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 2, "deleteDialog.message", i0.ɵɵpureFunction1(5, _c0$d, ctx.itemName)));
         } }, dependencies: [MatDialogModule, i1$5.MatDialogTitle, i1$5.MatDialogActions, i1$5.MatDialogContent, TranslateModule, StrokedButtonComponent, IconButtonComponent, RaisedButtonComponent, i1.TranslatePipe], styles: ["@media(max-width:500px){  .dialog-global-style{max-width:100vw!important}}  .dialog-global-style{margin:auto!important}[_nghost-%COMP%] > div[_ngcontent-%COMP%]:first-child{display:flex;align-items:center}[_nghost-%COMP%] > div[_ngcontent-%COMP%]:first-child   div[_ngcontent-%COMP%]:first-child{flex:1}.mat-mdc-dialog-actions[_ngcontent-%COMP%]{column-gap:8px}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeleteDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-delete-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogModule, TranslateModule, StrokedButtonComponent, IconButtonComponent, RaisedButtonComponent], template: "<div mat-dialog-title>\n    @if (itemGenderIsFemale)\n    {\n        <div class=\"h6 title\">{{ ('deleteDialog.titleFemale' | translate:{itemType}) }}</div>\n    } @else\n    {\n        <div class=\"h6 title\">{{ ('deleteDialog.titleMale' | translate:{itemType}) }}</div>\n    }\n    <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\" />\n</div>\n<div mat-dialog-content>\n    <p>{{('deleteDialog.message' | translate:{itemName})}}</p>\n</div>\n<mat-dialog-actions align=\"end\">\n    <cauca-stroked-button id=\"cancelButton\" label=\"cancel\" color=\"primary\" (buttonClick)=\"closeClick()\"/>\n    <cauca-raised-button id=\"deleteButton\" label=\"delete\" color=\"warn\" (buttonClick)=\"deleteClick()\" />\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.mat-mdc-dialog-actions{column-gap:8px}\n"] }]
+        args: [{ selector: 'cauca-delete-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogModule, TranslateModule, StrokedButtonComponent, IconButtonComponent, RaisedButtonComponent], template: "<div mat-dialog-title>\r\n    @if (itemGenderIsFemale)\r\n    {\r\n        <div class=\"h6 title\">{{ ('deleteDialog.titleFemale' | translate:{itemType}) }}</div>\r\n    } @else\r\n    {\r\n        <div class=\"h6 title\">{{ ('deleteDialog.titleMale' | translate:{itemType}) }}</div>\r\n    }\r\n    <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\" />\r\n</div>\r\n<div mat-dialog-content>\r\n    <p>{{('deleteDialog.message' | translate:{itemName})}}</p>\r\n</div>\r\n<mat-dialog-actions align=\"end\">\r\n    <cauca-stroked-button id=\"cancelButton\" label=\"cancel\" color=\"primary\" (buttonClick)=\"closeClick()\"/>\r\n    <cauca-raised-button id=\"deleteButton\" label=\"delete\" color=\"warn\" (buttonClick)=\"deleteClick()\" />\r\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}.mat-mdc-dialog-actions{column-gap:8px}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DeleteDialogComponent, { className: "DeleteDialogComponent", filePath: "lib/components/dialogs/delete-dialog/delete-dialog.component.ts", lineNumber: 19 }); })();
 
-const _c0$b = a0 => ({ itemName: a0 });
+const _c0$c = a0 => ({ itemName: a0 });
 class ErrorDialogComponent {
     constructor() {
         this.dialogRef = inject(MatDialogRef);
@@ -1677,12 +1677,12 @@ class ErrorDialogComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "errorDialog.titleError"));
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 4, "errorDialog.messageError", i0.ɵɵpureFunction1(7, _c0$b, ctx.itemName)));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 4, "errorDialog.messageError", i0.ɵɵpureFunction1(7, _c0$c, ctx.itemName)));
         } }, dependencies: [MatDialogModule, i1$5.MatDialogTitle, i1$5.MatDialogActions, i1$5.MatDialogContent, TranslateModule, RaisedButtonComponent, IconButtonComponent, i1.TranslatePipe], styles: ["@media(max-width:500px){  .dialog-global-style{max-width:100vw!important}}  .dialog-global-style{margin:auto!important}[_nghost-%COMP%] > div[_ngcontent-%COMP%]:first-child{display:flex;align-items:center}[_nghost-%COMP%] > div[_ngcontent-%COMP%]:first-child   div[_ngcontent-%COMP%]:first-child{flex:1}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-error-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogModule, TranslateModule, RaisedButtonComponent, IconButtonComponent], template: "<div mat-dialog-title>\n    <div class=\"h6\">{{('errorDialog.titleError' | translate)}}</div>\n    <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\"/>\n</div>\n<div mat-dialog-content>\n    <p>{{('errorDialog.messageError' | translate:{itemName})}}</p>\n</div>\n<mat-dialog-actions align=\"end\">\n    <cauca-raised-button id=\"okButton\" label=\"ok\" color=\"warn\" (buttonClick)=\"closeClick()\"/>\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}\n"] }]
+        args: [{ selector: 'cauca-error-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogModule, TranslateModule, RaisedButtonComponent, IconButtonComponent], template: "<div mat-dialog-title>\r\n    <div class=\"h6\">{{('errorDialog.titleError' | translate)}}</div>\r\n    <cauca-icon-button id=\"closeButton\" (buttonClick)=\"closeClick()\" icon=\"close\"/>\r\n</div>\r\n<div mat-dialog-content>\r\n    <p>{{('errorDialog.messageError' | translate:{itemName})}}</p>\r\n</div>\r\n<mat-dialog-actions align=\"end\">\r\n    <cauca-raised-button id=\"okButton\" label=\"ok\" color=\"warn\" (buttonClick)=\"closeClick()\"/>\r\n</mat-dialog-actions>", styles: ["@media(max-width:500px){::ng-deep .dialog-global-style{max-width:100vw!important}}::ng-deep .dialog-global-style{margin:auto!important}:host>div:first-child{display:flex;align-items:center}:host>div:first-child div:first-child{flex:1}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorDialogComponent, { className: "ErrorDialogComponent", filePath: "lib/components/dialogs/error-dialog/error-dialog.component.ts", lineNumber: 18 }); })();
 
@@ -1824,7 +1824,7 @@ class LoadingStateService {
         type: Injectable
     }], null, null); })();
 
-const _c0$a = ["*"];
+const _c0$b = ["*"];
 function SnackBarComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "cauca-stroked-button", 7);
@@ -1865,7 +1865,7 @@ class SnackBarComponent {
         this.buttonClick = output();
     }
     static { this.ɵfac = function SnackBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SnackBarComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SnackBarComponent, selectors: [["cauca-snackbar"]], inputs: { icon: [1, "icon"], caption: [1, "caption"], showCloseButton: [1, "showCloseButton"], type: [1, "type"], variant: [1, "variant"], buttonSpecificColor: [1, "buttonSpecificColor"], buttonIcon: [1, "buttonIcon"], inProgress: [1, "inProgress"], showButton: [1, "showButton"], buttonLabel: [1, "buttonLabel"] }, outputs: { closeClick: "closeClick", buttonClick: "buttonClick" }, ngContentSelectors: _c0$a, decls: 12, vars: 8, consts: [[1, "container"], [1, "icon-container"], [1, "text-container"], [1, "title", "alert-title"], [1, "message", "body2"], ["onkeypress", "buttonClick.emit()", 3, "color", "label", "isInProgress", "icon"], ["icon", "close", "onkeypress", "closeClick.emit()"], ["onkeypress", "buttonClick.emit()", 3, "click", "color", "label", "isInProgress", "icon"], ["icon", "close", "onkeypress", "closeClick.emit()", 3, "click"]], template: function SnackBarComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SnackBarComponent, selectors: [["cauca-snackbar"]], inputs: { icon: [1, "icon"], caption: [1, "caption"], showCloseButton: [1, "showCloseButton"], type: [1, "type"], variant: [1, "variant"], buttonSpecificColor: [1, "buttonSpecificColor"], buttonIcon: [1, "buttonIcon"], inProgress: [1, "inProgress"], showButton: [1, "showButton"], buttonLabel: [1, "buttonLabel"] }, outputs: { closeClick: "closeClick", buttonClick: "buttonClick" }, ngContentSelectors: _c0$b, decls: 12, vars: 8, consts: [[1, "container"], [1, "icon-container"], [1, "text-container"], [1, "title", "alert-title"], [1, "message", "body2"], ["onkeypress", "buttonClick.emit()", 3, "color", "label", "isInProgress", "icon"], ["icon", "close", "onkeypress", "closeClick.emit()"], ["onkeypress", "buttonClick.emit()", 3, "click", "color", "label", "isInProgress", "icon"], ["icon", "close", "onkeypress", "closeClick.emit()", 3, "click"]], template: function SnackBarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "mat-icon");
             i0.ɵɵtext(3);
@@ -1987,7 +1987,7 @@ class BadgeComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BadgeComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatChipsModule, MatIcon], template: "<mat-chip highlighted disableRipple [color]=\"color()\" [style.backgroundColor]=\"customColor()\" >\n    <div class=\"mat-chip-content\">\n        <mat-icon [style.color]=\"customTextColor()\">{{icon()}}</mat-icon>\n        <div class=\"chip-label\" [style.textTransform]=\"textTransform()\" [style.color]=\"customTextColor()\">{{autoTranslate() ? (label() | translate) : label()}}</div>\n    </div>\n</mat-chip>", styles: [".mat-chip-content{display:flex;justify-content:space-between;align-items:center;gap:8px}mat-icon{color:inherit}\n"] }]
+        args: [{ selector: 'cauca-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatChipsModule, MatIcon], template: "<mat-chip highlighted disableRipple [color]=\"color()\" [style.backgroundColor]=\"customColor()\" >\r\n    <div class=\"mat-chip-content\">\r\n        <mat-icon [style.color]=\"customTextColor()\">{{icon()}}</mat-icon>\r\n        <div class=\"chip-label\" [style.textTransform]=\"textTransform()\" [style.color]=\"customTextColor()\">{{autoTranslate() ? (label() | translate) : label()}}</div>\r\n    </div>\r\n</mat-chip>", styles: [".mat-chip-content{display:flex;justify-content:space-between;align-items:center;gap:8px}mat-icon{color:inherit}\n"] }]
     }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }], customTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTextColor", required: false }] }], textTransform: [{ type: i0.Input, args: [{ isSignal: true, alias: "textTransform", required: false }] }], autoTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoTranslate", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BadgeComponent, { className: "BadgeComponent", filePath: "lib/components/presenters/badge/badge.component.ts", lineNumber: 14 }); })();
 
@@ -2035,17 +2035,17 @@ class IconComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IconComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FontAwesomeModule], template: `
-  @if (isFontAwesome() && faIcon().length > 0) {
-    <div class="icon">
-      <fa-icon [icon]="faIcon()"></fa-icon>
-    </div>
-  }
-  @if (!isFontAwesome() && image()) {
-    <div class="icon">
-      <img [src]="image()" alt="icon" />
-    </div>
-  }
+        args: [{ selector: 'cauca-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FontAwesomeModule], template: `
+  @if (isFontAwesome() && faIcon().length > 0) {
+    <div class="icon">
+      <fa-icon [icon]="faIcon()"></fa-icon>
+    </div>
+  }
+  @if (!isFontAwesome() && image()) {
+    <div class="icon">
+      <img [src]="image()" alt="icon" />
+    </div>
+  }
   `, styles: ["img{max-height:40px;height:40px}fa-icon{max-height:40px;height:40px}\n"] }]
     }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IconComponent, { className: "IconComponent", filePath: "lib/components/presenters/icon/icon.component.ts", lineNumber: 23 }); })();
@@ -2370,7 +2370,7 @@ class PasswordValidator {
     }
 }
 
-const _c0$9 = ["*"];
+const _c0$a = ["*"];
 function PasswordSelectionComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "cauca-password-criteria-viewer", 5);
 } if (rf & 2) {
@@ -2455,7 +2455,7 @@ class PasswordSelectionComponent {
                     multi: true,
                     useExisting: forwardRef(() => PasswordSelectionComponent),
                 },
-            ])], ngContentSelectors: _c0$9, decls: 8, vars: 12, consts: [[3, "formGroup"], [1, "passwords"], ["formControlName", "password", 3, "autocomplete", "label", "translateLabel", "required"], ["formControlName", "confirmation", 3, "autocomplete", "label", "translateLabel", "required"], [1, "errors"], [3, "disabled", "passwordValidation"]], template: function PasswordSelectionComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], ngContentSelectors: _c0$a, decls: 8, vars: 12, consts: [[3, "formGroup"], [1, "passwords"], ["formControlName", "password", 3, "autocomplete", "label", "translateLabel", "required"], ["formControlName", "confirmation", 3, "autocomplete", "label", "translateLabel", "required"], [1, "errors"], [3, "disabled", "passwordValidation"]], template: function PasswordSelectionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "form", 0)(1, "div", 1);
             i0.ɵɵelement(2, "cauca-password-input", 2)(3, "cauca-password-input", 3);
@@ -2543,7 +2543,7 @@ class DateRangePickerComponent {
     }], () => [], { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateRangePickerComponent, { className: "DateRangePickerComponent", filePath: "lib/components/inputs/date-range-picker/date-range-picker.component.ts", lineNumber: 19 }); })();
 
-const _c0$8 = ["auto"];
+const _c0$9 = ["auto"];
 const _c1$1 = ["chipInput"];
 const _c2$1 = a0 => ({ data: a0 });
 function DropdownChipAutocompleteComponent_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -2775,7 +2775,7 @@ class DropdownChipAutocompleteComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionTemplate = _t.first);
         } }, viewQuery: function DropdownChipAutocompleteComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$8, 5)(_c1$1, 5)(MatAutocompleteTrigger, 5);
+            i0.ɵɵviewQuery(_c0$9, 5)(_c1$1, 5)(MatAutocompleteTrigger, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.matAutocomplete = _t.first);
@@ -2843,7 +2843,7 @@ class DropdownChipAutocompleteComponent {
                 ], host: {
                     '[id]': 'id',
                     '[class.floating]': 'shouldLabelFloat',
-                }, template: "<div role=\"group\" class=\"dropdown-chip-autocomplete-container\">\n\n  <mat-chip-grid #chipGrid [disabled]=\"disabled\">\n\n    @for (key of value; track key) {\n      <mat-chip highlighted [disabled]=\"disabled\" (removed)=\"removeSelectedItem(key)\" color=\"primary\">\n        {{getValueDisplay(key)}}\n        @if (allowRemove()) {\n          <mat-icon matChipRemove>cancel</mat-icon>\n        }\n      </mat-chip>\n    }\n\n    <div class=\"input-wrapper\">\n      <input\n        #chipInput\n        [(ngModel)]=\"searchValue\"\n        [matAutocomplete]=\"auto\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      @if (value.length > 0 && canRemoveAll()) {\n        <mat-icon matPrefix class=\"clearAll\" (click)=\"onClearAll();\">clear</mat-icon>\n      }\n      <mat-icon matSuffix>arrow_drop_down</mat-icon>\n    </div>\n  </mat-chip-grid>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"500px\" [class.full-width-field]=\"optionTemplate\" (optionSelected)=\"selectItemOnAutocomplete($event)\">\n    @for (item of filteredListAutoComplete | async; track item) {\n      <mat-option [value]=\"item[keyValue()]\" class=\"full-width-option\">\n        @if (optionTemplate) {\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: {data: item}\" />\n        } @else {\n          {{item[displayValue()]}}\n        }\n      </mat-option>\n    }\n  </mat-autocomplete>\n</div>\n\n", styles: ["span{opacity:0;transition:opacity .2s}:host.floating span{opacity:1}:host{cursor:pointer}:host mat-icon{align-self:center;color:var(--mat-select-enabled-arrow-color)}:host input.mat-mdc-chip-input{flex:1}.input-wrapper{flex:1;display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:nowrap}.input-wrapper>input{flex:1;min-width:150px}.input-wrapper>mat-icon{flex-shrink:0}\n"] }]
+                }, template: "<div role=\"group\" class=\"dropdown-chip-autocomplete-container\">\r\n\r\n  <mat-chip-grid #chipGrid [disabled]=\"disabled\">\r\n\r\n    @for (key of value; track key) {\r\n      <mat-chip highlighted [disabled]=\"disabled\" (removed)=\"removeSelectedItem(key)\" color=\"primary\">\r\n        {{getValueDisplay(key)}}\r\n        @if (allowRemove()) {\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        }\r\n      </mat-chip>\r\n    }\r\n\r\n    <div class=\"input-wrapper\">\r\n      <input\r\n        #chipInput\r\n        [(ngModel)]=\"searchValue\"\r\n        [matAutocomplete]=\"auto\"\r\n        [matChipInputFor]=\"chipGrid\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n      @if (value.length > 0 && canRemoveAll()) {\r\n        <mat-icon matPrefix class=\"clearAll\" (click)=\"onClearAll();\">clear</mat-icon>\r\n      }\r\n      <mat-icon matSuffix>arrow_drop_down</mat-icon>\r\n    </div>\r\n  </mat-chip-grid>\r\n\r\n  <mat-autocomplete #auto=\"matAutocomplete\" panelWidth=\"500px\" [class.full-width-field]=\"optionTemplate\" (optionSelected)=\"selectItemOnAutocomplete($event)\">\r\n    @for (item of filteredListAutoComplete | async; track item) {\r\n      <mat-option [value]=\"item[keyValue()]\" class=\"full-width-option\">\r\n        @if (optionTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"optionTemplate; context: {data: item}\" />\r\n        } @else {\r\n          {{item[displayValue()]}}\r\n        }\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</div>\r\n\r\n", styles: ["span{opacity:0;transition:opacity .2s}:host.floating span{opacity:1}:host{cursor:pointer}:host mat-icon{align-self:center;color:var(--mat-select-enabled-arrow-color)}:host input.mat-mdc-chip-input{flex:1}.input-wrapper{flex:1;display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:nowrap}.input-wrapper>input{flex:1;min-width:150px}.input-wrapper>mat-icon{flex-shrink:0}\n"] }]
     }], () => [], { matAutocomplete: [{
             type: ViewChild,
             args: ['auto']
@@ -2975,7 +2975,7 @@ class ColorPickerComponent {
     }], () => [], { valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColorPickerComponent, { className: "ColorPickerComponent", filePath: "lib/components/inputs/color-picker/color-picker.component.ts", lineNumber: 23 }); })();
 
-const _c0$7 = ["singleSelect"];
+const _c0$8 = ["singleSelect"];
 const _c1 = ["*"];
 const _c2 = () => [];
 function SelectWithSearchComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
@@ -3062,7 +3062,7 @@ class SelectWithSearchComponent {
     }
     static { this.ɵfac = function SelectWithSearchComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectWithSearchComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectWithSearchComponent, selectors: [["cauca-select-with-search"]], viewQuery: function SelectWithSearchComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$7, 7);
+            i0.ɵɵviewQuery(_c0$8, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.singleSelect = _t.first);
@@ -3093,20 +3093,20 @@ class SelectWithSearchComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectWithSearchComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-select-with-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelectModule, TranslateModule, MatFormFieldModule, ReactiveFormsModule, FormsModule, NgxMatSelectSearchModule], template: "<mat-form-field class=\"full-width-field header dense\" subscriptSizing=\"dynamic\">\n  <ng-content></ng-content>\n  <mat-label>{{ label() | translate }}</mat-label>\n  <mat-select [value]=\"value()\" (valueChange)=\"onSelectionChange($event)\" [disabled]=\"disableControl()\" [class.readonly-field]=\"disableControl()\" [multiple]=\"allowMultiSelection()\" >\n    @if (enableSearch()) {\n      <mat-option>\n        <ngx-mat-select-search [formControl]=\"optionFilterControl\" [placeholderLabel]=\"'search' | translate\"\n          [noEntriesFoundLabel]=\"'noResult' | translate\">\n        </ngx-mat-select-search>\n      </mat-option>\n    }\n    @for (option of filteredOptions.value() || []; track option) {\n      <mat-option [value]=\"option.id\">\n        {{option.name}}\n      </mat-option>\n    }\n  </mat-select>\n\n</mat-form-field>" }]
+        args: [{ selector: 'cauca-select-with-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelectModule, TranslateModule, MatFormFieldModule, ReactiveFormsModule, FormsModule, NgxMatSelectSearchModule], template: "<mat-form-field class=\"full-width-field header dense\" subscriptSizing=\"dynamic\">\r\n  <ng-content></ng-content>\r\n  <mat-label>{{ label() | translate }}</mat-label>\r\n  <mat-select [value]=\"value()\" (valueChange)=\"onSelectionChange($event)\" [disabled]=\"disableControl()\" [class.readonly-field]=\"disableControl()\" [multiple]=\"allowMultiSelection()\" >\r\n    @if (enableSearch()) {\r\n      <mat-option>\r\n        <ngx-mat-select-search [formControl]=\"optionFilterControl\" [placeholderLabel]=\"'search' | translate\"\r\n          [noEntriesFoundLabel]=\"'noResult' | translate\">\r\n        </ngx-mat-select-search>\r\n      </mat-option>\r\n    }\r\n    @for (option of filteredOptions.value() || []; track option) {\r\n      <mat-option [value]=\"option.id\">\r\n        {{option.name}}\r\n      </mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n</mat-form-field>" }]
     }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], selectFirstOptionByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectFirstOptionByDefault", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], allowMultiSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiSelection", required: false }] }], showClearOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearOption", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], singleSelect: [{
             type: ViewChild,
             args: ['singleSelect', { static: true }]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectWithSearchComponent, { className: "SelectWithSearchComponent", filePath: "lib/components/inputs/select-with-search/select-with-search.component.ts", lineNumber: 23 }); })();
 
-const _c0$6 = ["*"];
+const _c0$7 = ["*"];
 class GroupContainerComponent {
     constructor() {
         this.caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : []));
     }
     static { this.ɵfac = function GroupContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GroupContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GroupContainerComponent, selectors: [["cauca-group-container"]], inputs: { caption: [1, "caption"] }, ngContentSelectors: _c0$6, decls: 6, vars: 3, consts: [[1, "group-container"], [1, "group-container-title", "subtitle1"], [1, "group-container-content"]], template: function GroupContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GroupContainerComponent, selectors: [["cauca-group-container"]], inputs: { caption: [1, "caption"] }, ngContentSelectors: _c0$7, decls: 6, vars: 3, consts: [[1, "group-container"], [1, "group-container-title", "subtitle1"], [1, "group-container-content"]], template: function GroupContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtext(2);
@@ -3126,7 +3126,7 @@ class GroupContainerComponent {
     }], null, { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GroupContainerComponent, { className: "GroupContainerComponent", filePath: "lib/components/layout/group-container/group-container.component.ts", lineNumber: 12 }); })();
 
-const _c0$5 = ["*"];
+const _c0$6 = ["*"];
 function MainSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "div", 1);
     i0.ɵɵtext(1);
@@ -3142,7 +3142,7 @@ class MainSectionComponent {
         this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     }
     static { this.ɵfac = function MainSectionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MainSectionComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MainSectionComponent, selectors: [["cauca-main-section"]], inputs: { title: [1, "title"] }, ngContentSelectors: _c0$5, decls: 4, vars: 1, consts: [[1, "section"], [1, "section-description", "subtitle1"], [1, "section-fields"]], template: function MainSectionComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MainSectionComponent, selectors: [["cauca-main-section"]], inputs: { title: [1, "title"] }, ngContentSelectors: _c0$6, decls: 4, vars: 1, consts: [[1, "section"], [1, "section-description", "subtitle1"], [1, "section-fields"]], template: function MainSectionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, MainSectionComponent_Conditional_1_Template, 3, 3, "div", 1);
@@ -3160,13 +3160,13 @@ class MainSectionComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MainSectionComponent, { className: "MainSectionComponent", filePath: "lib/components/layout/sections/main-section/main-section.component.ts", lineNumber: 11 }); })();
 
-const _c0$4 = ["*"];
+const _c0$5 = ["*"];
 class SectionColumnComponent {
     constructor() {
         this.showBigGap = input(false, ...(ngDevMode ? [{ debugName: "showBigGap" }] : []));
     }
     static { this.ɵfac = function SectionColumnComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SectionColumnComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionColumnComponent, selectors: [["cauca-section-column"]], inputs: { showBigGap: [1, "showBigGap"] }, ngContentSelectors: _c0$4, decls: 2, vars: 2, consts: [[1, "section-columns"]], template: function SectionColumnComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionColumnComponent, selectors: [["cauca-section-column"]], inputs: { showBigGap: [1, "showBigGap"] }, ngContentSelectors: _c0$5, decls: 2, vars: 2, consts: [[1, "section-columns"]], template: function SectionColumnComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -3266,88 +3266,109 @@ class SectionFieldComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionFieldComponent, { className: "SectionFieldComponent", filePath: "lib/components/layout/sections/section-field/section-field.component.ts", lineNumber: 12 }); })();
 
 function PageTitleComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "cauca-button", 4);
+    i0.ɵɵlistener("buttonClick", function PageTitleComponent_Conditional_4_Conditional_1_Template_cauca_button_buttonClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.backToLastBreadcrumbLink()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 5);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.mustTranslateBreadcrumb() ? i0.ɵɵpipeBind1(4, 1, ctx_r1.currentBreadcrumb()) : ctx_r1.currentBreadcrumb());
+} }
+function PageTitleComponent_Conditional_4_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.baseCrumb()));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r1.baseCrumb()));
 } }
-function PageTitleComponent_Conditional_4_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "/");
     i0.ɵɵelementEnd();
 } }
-function PageTitleComponent_Conditional_4_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 5);
+function PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 7);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const location_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("href", location_r2.link, i0.ɵɵsanitizeUrl)("routerLink", location_r2.link);
+    const location_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("href", location_r3.link, i0.ɵɵsanitizeUrl)("routerLink", location_r3.link);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 3, location_r2.title));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 3, location_r3.title));
 } }
-function PageTitleComponent_Conditional_4_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 7);
-    i0.ɵɵlistener("click", function PageTitleComponent_Conditional_4_For_3_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r3); const location_r2 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(location_r2.action()); });
+function PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵlistener("click", function PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const location_r3 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(location_r3.action()); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const location_r2 = i0.ɵɵnextContext().$implicit;
+    const location_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(location_r2.translate ? i0.ɵɵpipeBind1(2, 1, location_r2.title) : location_r2.title);
+    i0.ɵɵtextInterpolate(location_r3.translate ? i0.ɵɵpipeBind1(2, 1, location_r3.title) : location_r3.title);
 } }
-function PageTitleComponent_Conditional_4_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 3);
+function PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const location_r2 = i0.ɵɵnextContext().$implicit;
+    const location_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(location_r2.title);
+    i0.ɵɵtextInterpolate(location_r3.title);
 } }
-function PageTitleComponent_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PageTitleComponent_Conditional_4_For_3_Conditional_0_Template, 2, 0, "span");
-    i0.ɵɵconditionalCreate(1, PageTitleComponent_Conditional_4_For_3_Conditional_1_Template, 3, 5, "a", 5)(2, PageTitleComponent_Conditional_4_For_3_Conditional_2_Template, 3, 3, "span", 6)(3, PageTitleComponent_Conditional_4_For_3_Conditional_3_Template, 2, 1, "span", 3);
+function PageTitleComponent_Conditional_4_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_0_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(1, PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_1_Template, 3, 5, "a", 7)(2, PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_2_Template, 3, 3, "span", 8)(3, PageTitleComponent_Conditional_4_Conditional_2_For_2_Conditional_3_Template, 2, 1, "span", 6);
 } if (rf & 2) {
-    const location_r2 = ctx.$implicit;
-    const $index_r4 = ctx.$index;
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.baseCrumb() && $index_r4 === 0 ? 0 : -1);
+    const location_r3 = ctx.$implicit;
+    const $index_r5 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r1.baseCrumb() && $index_r5 === 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(location_r2.link ? 1 : location_r2.action ? 2 : 3);
+    i0.ɵɵconditional(location_r3.link ? 1 : location_r3.action ? 2 : 3);
 } }
-function PageTitleComponent_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function PageTitleComponent_Conditional_4_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "/");
     i0.ɵɵelementEnd();
 } }
-function PageTitleComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, PageTitleComponent_Conditional_4_Conditional_1_Template, 3, 3, "div", 3);
-    i0.ɵɵrepeaterCreate(2, PageTitleComponent_Conditional_4_For_3_Template, 4, 2, null, null, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(4, PageTitleComponent_Conditional_4_Conditional_4_Template, 2, 0, "span");
-    i0.ɵɵelementStart(5, "span", 4);
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "translate");
-    i0.ɵɵelementEnd()();
+function PageTitleComponent_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PageTitleComponent_Conditional_4_Conditional_2_Conditional_0_Template, 3, 3, "div", 6);
+    i0.ɵɵrepeaterCreate(1, PageTitleComponent_Conditional_4_Conditional_2_For_2_Template, 4, 2, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(3, PageTitleComponent_Conditional_4_Conditional_2_Conditional_3_Template, 2, 0, "span");
+    i0.ɵɵelementStart(4, "span", 5);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_3_0;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.baseCrumb() ? 1 : -1);
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.baseCrumb() ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r0.breadcrumbLocation());
+    i0.ɵɵrepeater(ctx_r1.breadcrumbLocation());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.baseCrumb() || ((tmp_3_0 = ctx_r0.breadcrumbLocation()) == null ? null : tmp_3_0.length) ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.baseCrumb() || ((tmp_4_0 = ctx_r1.breadcrumbLocation()) == null ? null : tmp_4_0.length) ? 3 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.mustTranslateBreadcrumb() ? i0.ɵɵpipeBind1(7, 3, ctx_r0.currentBreadcrumb()) : ctx_r0.currentBreadcrumb());
+    i0.ɵɵtextInterpolate(ctx_r1.mustTranslateBreadcrumb() ? i0.ɵɵpipeBind1(6, 3, ctx_r1.currentBreadcrumb()) : ctx_r1.currentBreadcrumb());
+} }
+function PageTitleComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵconditionalCreate(1, PageTitleComponent_Conditional_4_Conditional_1_Template, 5, 3, "div", 3)(2, PageTitleComponent_Conditional_4_Conditional_2_Template, 7, 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.displayCompactBreadcrumb() ? 1 : 2);
 } }
 class PageTitleComponent {
     constructor() {
@@ -3357,33 +3378,294 @@ class PageTitleComponent {
         this.breadcrumb = input('', ...(ngDevMode ? [{ debugName: "breadcrumb" }] : []));
         this.baseCrumb = input('', ...(ngDevMode ? [{ debugName: "baseCrumb" }] : []));
         this.translateBreadcrumb = input(true, ...(ngDevMode ? [{ debugName: "translateBreadcrumb" }] : []));
+        this.isMobile = input(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
         this.displayBreadcrumb = computed(() => this.showBreadcrumb() || this.breadcrumbService?.showBreadcrumb(), ...(ngDevMode ? [{ debugName: "displayBreadcrumb" }] : []));
         this.breadcrumbLocation = computed(() => this.breadcrumbService?.location() || this.location() || [], ...(ngDevMode ? [{ debugName: "breadcrumbLocation" }] : []));
         this.currentBreadcrumb = computed(() => this.breadcrumbService?.breadcrumb() || this.breadcrumb() || '', ...(ngDevMode ? [{ debugName: "currentBreadcrumb" }] : []));
         this.mustTranslateBreadcrumb = computed(() => this.breadcrumbService?.translateBreadcrumb() || this.translateBreadcrumb(), ...(ngDevMode ? [{ debugName: "mustTranslateBreadcrumb" }] : []));
         this.hasBreadcrumb = computed(() => this.currentBreadcrumb() !== '', ...(ngDevMode ? [{ debugName: "hasBreadcrumb" }] : []));
+        this.hasLinkedBreadcrumb = computed(() => this.breadcrumbLocation().some((location) => !!location.link), ...(ngDevMode ? [{ debugName: "hasLinkedBreadcrumb" }] : []));
+        this.displayCompactBreadcrumb = computed(() => this.isMobile() && this.hasLinkedBreadcrumb(), ...(ngDevMode ? [{ debugName: "displayCompactBreadcrumb" }] : []));
         this.breadcrumbService = inject(BreadcrumbService, { optional: true });
+        this.router = inject(Router);
+    }
+    backToLastBreadcrumbLink() {
+        const target = [...this.breadcrumbLocation()].reverse().find((location) => !!location.link);
+        if (target?.link) {
+            this.router.navigateByUrl(target.link);
+        }
     }
     static { this.ɵfac = function PageTitleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PageTitleComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PageTitleComponent, selectors: [["cauca-page-title"]], inputs: { caption: [1, "caption"], showBreadcrumb: [1, "showBreadcrumb"], location: [1, "location"], breadcrumb: [1, "breadcrumb"], baseCrumb: [1, "baseCrumb"], translateBreadcrumb: [1, "translateBreadcrumb"] }, decls: 5, vars: 4, consts: [[1, "title-section"], [1, "title-label"], [1, "breadcrumb"], [1, "basecrumb"], [1, "breadcrumb-current"], [1, "basecrumb", 3, "href", "routerLink"], [1, "basecrumb", "crumb-link"], [1, "basecrumb", "crumb-link", 3, "click"]], template: function PageTitleComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PageTitleComponent, selectors: [["cauca-page-title"]], inputs: { caption: [1, "caption"], showBreadcrumb: [1, "showBreadcrumb"], location: [1, "location"], breadcrumb: [1, "breadcrumb"], baseCrumb: [1, "baseCrumb"], translateBreadcrumb: [1, "translateBreadcrumb"], isMobile: [1, "isMobile"] }, decls: 5, vars: 4, consts: [[1, "title-section"], [1, "title-label"], [1, "breadcrumb"], [1, "breadcrumb-compact"], ["type", "icon", "icon", "arrow_back", "color", "primary", 3, "buttonClick"], [1, "breadcrumb-current"], [1, "basecrumb"], [1, "basecrumb", 3, "href", "routerLink"], [1, "basecrumb", "crumb-link"], [1, "basecrumb", "crumb-link", 3, "click"]], template: function PageTitleComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "h4", 1);
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, PageTitleComponent_Conditional_4_Template, 8, 5, "div", 2);
+            i0.ɵɵconditionalCreate(4, PageTitleComponent_Conditional_4_Template, 3, 1, "div", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, ctx.caption()));
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.displayBreadcrumb() ? 4 : -1);
-        } }, dependencies: [TranslateModule, RouterModule, i1$9.RouterLink, i1.TranslatePipe], styles: [".title-section[_ngcontent-%COMP%]{display:flex;gap:8px;flex-direction:column;align-items:flex-start;align-self:stretch;margin-bottom:24px}.breadcrumb[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}h4[_ngcontent-%COMP%]{padding:0}a[_ngcontent-%COMP%]{text-decoration:none}a[_ngcontent-%COMP%]:visited{color:inherit}.basecrumb[_ngcontent-%COMP%]{color:#12101499}.crumb-link[_ngcontent-%COMP%]{cursor:pointer}@media(max-width:500px){.title-section[_ngcontent-%COMP%]{padding:16px}}"], changeDetection: 0 }); }
+        } }, dependencies: [TranslateModule, RouterModule, i1$9.RouterLink, ButtonComponent, i1.TranslatePipe], styles: [".title-section[_ngcontent-%COMP%]{display:flex;gap:8px;flex-direction:column;align-items:flex-start;align-self:stretch;margin-bottom:24px}.breadcrumb[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.breadcrumb-compact[_ngcontent-%COMP%]{display:flex;align-items:center;gap:4px}h4[_ngcontent-%COMP%]{padding:0}a[_ngcontent-%COMP%]{text-decoration:none}a[_ngcontent-%COMP%]:visited{color:inherit}.basecrumb[_ngcontent-%COMP%]{color:#12101499}.crumb-link[_ngcontent-%COMP%]{cursor:pointer}@media(max-width:500px){.title-section[_ngcontent-%COMP%]{padding:16px}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PageTitleComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-page-title', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterModule], template: "<div class=\"title-section\">\n\n  <h4 class=\"title-label\">{{caption() | translate }}</h4>\n\n  @if (displayBreadcrumb()) {\n    <div class=\"breadcrumb\">\n\n      @if (baseCrumb()) {\n        <div class=\"basecrumb\">{{baseCrumb()|translate}}</div>\n      }\n\n      @for(location of breadcrumbLocation(); track location) {\n        @if (baseCrumb() && $index === 0) {\n        <span>/</span>\n        }\n        @if (location.link) {\n          <a class=\"basecrumb\" [href]=\"location.link\" [routerLink]=\"location.link\">{{location.title| translate }}</a>\n        } @else if (location.action) {\n          <span class=\"basecrumb crumb-link\" (click)=\"location.action()\">{{ location.translate ? (location.title | translate) : location.title}}</span>\n        } @else {\n          <span class=\"basecrumb\">{{location.title}}</span>\n        }\n      }\n      @if (baseCrumb() || breadcrumbLocation()?.length) {\n        <span>/</span>\n      }\n      <span class=\"breadcrumb-current\">{{ mustTranslateBreadcrumb() ? (currentBreadcrumb() | translate) : currentBreadcrumb() }}</span>\n\n    </div>\n  }\n\n</div>", styles: [".title-section{display:flex;gap:8px;flex-direction:column;align-items:flex-start;align-self:stretch;margin-bottom:24px}.breadcrumb{display:flex;align-items:center;gap:8px}h4{padding:0}a{text-decoration:none}a:visited{color:inherit}.basecrumb{color:#12101499}.crumb-link{cursor:pointer}@media(max-width:500px){.title-section{padding:16px}}\n"] }]
-    }], null, { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], breadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], baseCrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseCrumb", required: false }] }], translateBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateBreadcrumb", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PageTitleComponent, { className: "PageTitleComponent", filePath: "lib/components/layout/page-title/page-title.component.ts", lineNumber: 14 }); })();
+        args: [{ selector: 'cauca-page-title', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, RouterModule, ButtonComponent], template: "<div class=\"title-section\">\r\n\r\n  <h4 class=\"title-label\">{{caption() | translate }}</h4>\r\n\r\n  @if (displayBreadcrumb()) {\r\n    <div class=\"breadcrumb\">\r\n      @if (displayCompactBreadcrumb()) {\r\n        <div class=\"breadcrumb-compact\">\r\n          <cauca-button type=\"icon\" icon=\"arrow_back\" (buttonClick)=\"backToLastBreadcrumbLink()\" color=\"primary\" />\r\n          <span class=\"breadcrumb-current\">{{ mustTranslateBreadcrumb() ? (currentBreadcrumb() | translate) : currentBreadcrumb() }}</span>\r\n        </div>\r\n      } @else {\r\n\r\n        @if (baseCrumb()) {\r\n          <div class=\"basecrumb\">{{baseCrumb()|translate}}</div>\r\n        }\r\n\r\n        @for(location of breadcrumbLocation(); track location) {\r\n          @if (baseCrumb() && $index === 0) {\r\n            <span>/</span>\r\n          }\r\n          @if (location.link) {\r\n            <a class=\"basecrumb\" [href]=\"location.link\" [routerLink]=\"location.link\">{{location.title| translate }}</a>\r\n          } @else if (location.action) {\r\n            <span class=\"basecrumb crumb-link\" (click)=\"location.action()\">{{ location.translate ? (location.title | translate) : location.title}}</span>\r\n          } @else {\r\n            <span class=\"basecrumb\">{{location.title}}</span>\r\n          }\r\n        }\r\n        @if (baseCrumb() || breadcrumbLocation()?.length) {\r\n          <span>/</span>\r\n        }\r\n        <span class=\"breadcrumb-current\">{{ mustTranslateBreadcrumb() ? (currentBreadcrumb() | translate) : currentBreadcrumb() }}</span>\r\n      }\r\n\r\n    </div>\r\n  }\r\n\r\n</div>", styles: [".title-section{display:flex;gap:8px;flex-direction:column;align-items:flex-start;align-self:stretch;margin-bottom:24px}.breadcrumb{display:flex;align-items:center;gap:8px}.breadcrumb-compact{display:flex;align-items:center;gap:4px}h4{padding:0}a{text-decoration:none}a:visited{color:inherit}.basecrumb{color:#12101499}.crumb-link{cursor:pointer}@media(max-width:500px){.title-section{padding:16px}}\n"] }]
+    }], null, { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], breadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], baseCrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseCrumb", required: false }] }], translateBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateBreadcrumb", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PageTitleComponent, { className: "PageTitleComponent", filePath: "lib/components/layout/page-title/page-title.component.ts", lineNumber: 16 }); })();
+
+const _c0$4 = ["*"];
+class ResponsiveTabGroupWrapperComponent {
+    constructor() {
+        this.mobile = input(false, ...(ngDevMode ? [{ debugName: "mobile" }] : []));
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject(ElementRef);
+        this.tabGroup = contentChild.required(MatTabGroup);
+        this.tabs = contentChildren(MatTab, { ...(ngDevMode ? { debugName: "tabs" } : {}), descendants: true });
+        this.swipeThreshold = 48;
+        this.swipePreviewThreshold = 16;
+        this.swipePreviewMaxOffsetPx = 300;
+        this.touchStartX = null;
+        this.touchStartY = null;
+        this.previousSelectedIndex = 0;
+    }
+    ngAfterViewInit() {
+        const tabGroup = this.tabGroup();
+        this.getTabGroupElement()?.classList.add('cauca-responsive-tab-group-content');
+        this.previousSelectedIndex = tabGroup.selectedIndex ?? 0;
+        this.applyNavigationDirectionClass('forward');
+        this.bindHeaderPaginationControls();
+        this.subscribeToSelectedIndexChanges(tabGroup);
+        queueMicrotask(() => this.scheduleHeaderPaginationStateSync());
+    }
+    onWindowResize() {
+        this.scheduleHeaderPaginationStateSync();
+    }
+    onTouchStart(event) {
+        if (!this.isSwipeEnabled() || !this.isTouchInsideTabBody(event) || event.touches.length !== 1) {
+            return;
+        }
+        const touch = event.touches[0];
+        this.clearSwipePreview();
+        this.touchStartX = touch.clientX;
+        this.touchStartY = touch.clientY;
+    }
+    onTouchMove(event) {
+        if (!this.isSwipeEnabled() || this.touchStartX === null || this.touchStartY === null || event.touches.length !== 1) {
+            return;
+        }
+        const touch = event.touches[0];
+        const deltaX = touch.clientX - this.touchStartX;
+        const deltaY = touch.clientY - this.touchStartY;
+        if (Math.abs(deltaX) < this.swipePreviewThreshold || Math.abs(deltaX) <= Math.abs(deltaY)) {
+            return;
+        }
+        if (deltaX < 0 && this.isLastTabSelected()) {
+            return;
+        }
+        if (deltaX > 0 && this.isFirstTabSelected()) {
+            return;
+        }
+        this.applySwipePreview(deltaX);
+    }
+    onTouchEnd(event) {
+        if (!this.isSwipeEnabled() || this.touchStartX === null || this.touchStartY === null || event.changedTouches.length !== 1) {
+            this.resetTouchState();
+            return;
+        }
+        const touch = event.changedTouches[0];
+        const deltaX = touch.clientX - this.touchStartX;
+        const deltaY = touch.clientY - this.touchStartY;
+        this.resetTouchState();
+        if (Math.abs(deltaX) < this.swipeThreshold || Math.abs(deltaX) <= Math.abs(deltaY)) {
+            return;
+        }
+        if (deltaX < 0) {
+            this.goToNextTab();
+            return;
+        }
+        this.goToPreviousTab();
+    }
+    onTouchCancel() {
+        this.clearSwipePreview();
+        this.resetTouchState();
+    }
+    subscribeToSelectedIndexChanges(tabGroup) {
+        tabGroup.selectedIndexChange
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((selectedIndex) => {
+            const direction = selectedIndex >= this.previousSelectedIndex ? 'forward' : 'backward';
+            this.clearSwipePreview();
+            this.applyNavigationDirectionClass(direction);
+            this.previousSelectedIndex = selectedIndex;
+            this.scheduleHeaderPaginationStateSync();
+        });
+    }
+    goToNextTab() {
+        const tabGroup = this.tabGroup();
+        this.clearSwipePreview();
+        this.applyNavigationDirectionClass('forward');
+        tabGroup.selectedIndex = Math.min((tabGroup.selectedIndex ?? 0) + 1, this.getTabCount() - 1);
+    }
+    goToPreviousTab() {
+        const tabGroup = this.tabGroup();
+        this.clearSwipePreview();
+        this.applyNavigationDirectionClass('backward');
+        tabGroup.selectedIndex = Math.max((tabGroup.selectedIndex ?? 0) - 1, 0);
+    }
+    resetTouchState() {
+        this.touchStartX = null;
+        this.touchStartY = null;
+    }
+    bindHeaderPaginationControls() {
+        const { previousButton, nextButton } = this.getHeaderPaginationButtons();
+        if (!previousButton || !nextButton) {
+            return;
+        }
+        fromEvent(previousButton, 'pointerdown', { capture: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.handleHeaderPaginationPointerDown('before', event));
+        fromEvent(nextButton, 'pointerdown', { capture: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.handleHeaderPaginationPointerDown('after', event));
+    }
+    handleHeaderPaginationPointerDown(direction, event) {
+        if (!this.isSwipeEnabled()) {
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (direction === 'before') {
+            if (!this.isFirstTabSelected()) {
+                this.goToPreviousTab();
+            }
+            return;
+        }
+        if (!this.isLastTabSelected()) {
+            this.goToNextTab();
+        }
+    }
+    syncHeaderPaginationState() {
+        const { previousButton, nextButton } = this.getHeaderPaginationButtons();
+        if (!previousButton || !nextButton) {
+            return;
+        }
+        if (!this.isSwipeEnabled()) {
+            this.setHeaderPaginationDisabled(previousButton, false);
+            this.setHeaderPaginationDisabled(nextButton, false);
+            return;
+        }
+        this.setHeaderPaginationDisabled(previousButton, this.isFirstTabSelected());
+        this.setHeaderPaginationDisabled(nextButton, this.isLastTabSelected());
+    }
+    scheduleHeaderPaginationStateSync() {
+        requestAnimationFrame(() => this.syncHeaderPaginationState());
+    }
+    setHeaderPaginationDisabled(button, disabled) {
+        button.classList.toggle('mat-mdc-tab-header-pagination-disabled', disabled);
+        button.setAttribute('aria-disabled', String(disabled));
+        button.tabIndex = disabled ? -1 : 0;
+    }
+    isFirstTabSelected() {
+        return (this.tabGroup().selectedIndex ?? 0) <= 0;
+    }
+    isLastTabSelected() {
+        return (this.tabGroup().selectedIndex ?? 0) >= this.getTabCount() - 1;
+    }
+    getTabCount() {
+        const projectedTabCount = this.tabs().length;
+        if (projectedTabCount > 0) {
+            return projectedTabCount;
+        }
+        return this.tabGroup()._tabs?.length ?? 0;
+    }
+    isSwipeEnabled() {
+        if (this.mobile()) {
+            return true;
+        }
+        return globalThis.window !== undefined && globalThis.matchMedia('(pointer: coarse)').matches;
+    }
+    isTouchInsideTabBody(event) {
+        const target = event.target;
+        return target instanceof Element && target.closest('.mat-mdc-tab-body-wrapper') !== null;
+    }
+    getTabGroupElement() {
+        return this.elementRef.nativeElement.querySelector('mat-tab-group');
+    }
+    applyNavigationDirectionClass(direction) {
+        const tabGroupElement = this.getTabGroupElement();
+        if (!tabGroupElement) {
+            return;
+        }
+        tabGroupElement.classList.toggle('cauca-responsive-tab-direction-forward', direction === 'forward');
+        tabGroupElement.classList.toggle('cauca-responsive-tab-direction-backward', direction === 'backward');
+    }
+    applySwipePreview(deltaX) {
+        const tabGroupElement = this.getTabGroupElement();
+        if (!tabGroupElement) {
+            return;
+        }
+        const normalizedProgress = Math.max(0, Math.min(1, (Math.abs(deltaX) - this.swipePreviewThreshold) / (this.swipeThreshold - this.swipePreviewThreshold)));
+        const translateX = Math.sign(-deltaX) * normalizedProgress * this.swipePreviewMaxOffsetPx;
+        tabGroupElement.classList.add('cauca-responsive-tab-preview-active');
+        tabGroupElement.style.setProperty('--cauca-responsive-tab-preview-translate-x', `${translateX}px`);
+    }
+    clearSwipePreview() {
+        const tabGroupElement = this.getTabGroupElement();
+        if (!tabGroupElement) {
+            return;
+        }
+        tabGroupElement.classList.remove('cauca-responsive-tab-preview-active');
+        tabGroupElement.style.removeProperty('--cauca-responsive-tab-preview-translate-x');
+    }
+    getHeaderPaginationButtons() {
+        return {
+            previousButton: this.elementRef.nativeElement.querySelector('.mat-mdc-tab-header-pagination-before'),
+            nextButton: this.elementRef.nativeElement.querySelector('.mat-mdc-tab-header-pagination-after'),
+        };
+    }
+    static { this.ɵfac = function ResponsiveTabGroupWrapperComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ResponsiveTabGroupWrapperComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResponsiveTabGroupWrapperComponent, selectors: [["cauca-responsive-tab-group-wrapper"]], contentQueries: function ResponsiveTabGroupWrapperComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.tabGroup, MatTabGroup, 5)(dirIndex, ctx.tabs, MatTab, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, hostAttrs: [1, "cauca-responsive-tab-group-shell"], hostVars: 2, hostBindings: function ResponsiveTabGroupWrapperComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function ResponsiveTabGroupWrapperComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, i0.ɵɵresolveWindow)("touchstart", function ResponsiveTabGroupWrapperComponent_touchstart_HostBindingHandler($event) { return ctx.onTouchStart($event); })("touchmove", function ResponsiveTabGroupWrapperComponent_touchmove_HostBindingHandler($event) { return ctx.onTouchMove($event); })("touchend", function ResponsiveTabGroupWrapperComponent_touchend_HostBindingHandler($event) { return ctx.onTouchEnd($event); })("touchcancel", function ResponsiveTabGroupWrapperComponent_touchcancel_HostBindingHandler() { return ctx.onTouchCancel(); });
+        } if (rf & 2) {
+            i0.ɵɵclassProp("cauca-responsive-tab-group-shell-mobile", ctx.mobile());
+        } }, inputs: { mobile: [1, "mobile"] }, ngContentSelectors: _c0$4, decls: 1, vars: 0, template: function ResponsiveTabGroupWrapperComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content{overflow-y:hidden;padding:16px}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-wrapper{overflow:hidden}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{padding:0;height:100%;display:flex;overflow:hidden}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content{padding:0}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-label-container{overflow-x:hidden;overflow-y:hidden}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=false]{opacity:1;pointer-events:auto}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination{display:flex;opacity:1}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=true]{opacity:.45;pointer-events:none}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-list{flex-grow:1;width:100%;transform:none!important}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-labels{flex:1 1 auto;width:100%}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab{display:none}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active{display:inline-flex;flex:1 1 auto;max-width:100%;justify-content:center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{transition:transform .1s linear}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-forward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-forward .4s ease-out;transform-origin:left center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-backward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-backward .4s ease-out;transform-origin:right center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-preview-active .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:none;transform:translate(var(--cauca-responsive-tab-preview-translate-x, 0px))}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{touch-action:pan-y}@media(max-width:768px){cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content{padding:0}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-label-container{overflow-x:hidden;overflow-y:hidden}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=false]{opacity:1;pointer-events:auto}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination{display:flex;opacity:1}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=true]{opacity:.45;pointer-events:none}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-list{flex-grow:1;width:100%;transform:none!important}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-labels{flex:1 1 auto;width:100%}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab{display:none}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active{display:inline-flex;flex:1 1 auto;max-width:100%;justify-content:center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{transition:transform .1s linear}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-forward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-forward .4s ease-out;transform-origin:left center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-backward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-backward .4s ease-out;transform-origin:right center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-preview-active .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:none;transform:translate(var(--cauca-responsive-tab-preview-translate-x, 0px))}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{touch-action:pan-y}}@keyframes cauca-responsive-tab-underline-forward{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes cauca-responsive-tab-underline-backward{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResponsiveTabGroupWrapperComponent, [{
+        type: Component,
+        args: [{ selector: 'cauca-responsive-tab-group-wrapper', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                    class: 'cauca-responsive-tab-group-shell',
+                    '[class.cauca-responsive-tab-group-shell-mobile]': 'mobile()'
+                }, template: "<ng-content />\r\n", styles: ["cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content{overflow-y:hidden;padding:16px}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-wrapper{overflow:hidden}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{padding:0;height:100%;display:flex;overflow:hidden}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content{padding:0}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-label-container{overflow-x:hidden;overflow-y:hidden}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=false]{opacity:1;pointer-events:auto}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination{display:flex;opacity:1}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=true]{opacity:.45;pointer-events:none}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-list{flex-grow:1;width:100%;transform:none!important}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-labels{flex:1 1 auto;width:100%}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab{display:none}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active{display:inline-flex;flex:1 1 auto;max-width:100%;justify-content:center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{transition:transform .1s linear}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-forward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-forward .4s ease-out;transform-origin:left center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-backward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-backward .4s ease-out;transform-origin:right center}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content.cauca-responsive-tab-preview-active .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:none;transform:translate(var(--cauca-responsive-tab-preview-translate-x, 0px))}cauca-responsive-tab-group-wrapper.cauca-responsive-tab-group-shell-mobile .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{touch-action:pan-y}@media(max-width:768px){cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content{padding:0}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-label-container{overflow-x:hidden;overflow-y:hidden}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=false]{opacity:1;pointer-events:auto}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination{display:flex;opacity:1}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-header-pagination[aria-disabled=true]{opacity:.45;pointer-events:none}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-list{flex-grow:1;width:100%;transform:none!important}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-labels{flex:1 1 auto;width:100%}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab{display:none}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active{display:inline-flex;flex:1 1 auto;max-width:100%;justify-content:center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{transition:transform .1s linear}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-forward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-forward .4s ease-out;transform-origin:left center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-direction-backward .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:cauca-responsive-tab-underline-backward .4s ease-out;transform-origin:right center}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content.cauca-responsive-tab-preview-active .mat-mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline{animation:none;transform:translate(var(--cauca-responsive-tab-preview-translate-x, 0px))}cauca-responsive-tab-group-wrapper .cauca-responsive-tab-group-content .mat-mdc-tab-body-content{touch-action:pan-y}}@keyframes cauca-responsive-tab-underline-forward{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes cauca-responsive-tab-underline-backward{0%{transform:scaleX(0)}to{transform:scaleX(1)}}\n"] }]
+    }], null, { mobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile", required: false }] }], tabGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MatTabGroup), { isSignal: true }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatTab), { ...{ descendants: true }, isSignal: true }] }], onWindowResize: [{
+            type: HostListener,
+            args: ['window:resize']
+        }], onTouchStart: [{
+            type: HostListener,
+            args: ['touchstart', ['$event']]
+        }], onTouchMove: [{
+            type: HostListener,
+            args: ['touchmove', ['$event']]
+        }], onTouchEnd: [{
+            type: HostListener,
+            args: ['touchend', ['$event']]
+        }], onTouchCancel: [{
+            type: HostListener,
+            args: ['touchcancel']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResponsiveTabGroupWrapperComponent, { className: "ResponsiveTabGroupWrapperComponent", filePath: "lib/components/layout/responsive-tab-group-wrapper/responsive-tab-group-wrapper.component.ts", lineNumber: 18 }); })();
 
 const _c0$3 = ["*"];
 class ExpandablePanelComponent {
@@ -4014,7 +4296,7 @@ class CaucaSimpleDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaSimpleDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-simple-dialog', imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule], template: "<h1 mat-dialog-title>{{data.title}}</h1>\n<div mat-dialog-content>\n  <div [innerHTML]=\"data.message\"></div>\n</div>\n@if (data.buttons) {\n  <div mat-dialog-actions>\n    @for (label of data.buttons; track label; let i = $index) {\n      <button mat-raised-button (click)=\"onClick(i)\">{{label}}</button>\n    }\n  </div>\n}", styles: ["div[mat-dialog-actions]{margin-top:20px;text-align:center}\n"] }]
+        args: [{ selector: 'cauca-simple-dialog', imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule], template: "<h1 mat-dialog-title>{{data.title}}</h1>\r\n<div mat-dialog-content>\r\n  <div [innerHTML]=\"data.message\"></div>\r\n</div>\r\n@if (data.buttons) {\r\n  <div mat-dialog-actions>\r\n    @for (label of data.buttons; track label; let i = $index) {\r\n      <button mat-raised-button (click)=\"onClick(i)\">{{label}}</button>\r\n    }\r\n  </div>\r\n}", styles: ["div[mat-dialog-actions]{margin-top:20px;text-align:center}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSimpleDialogComponent, { className: "CaucaSimpleDialogComponent", filePath: "lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.ts", lineNumber: 13 }); })();
 
@@ -4137,7 +4419,7 @@ class CaucaInputFileComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputFileComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-input-file', imports: [MatButtonModule, MatIcon], template: "<button mat-raised-button (click)=\"openDialog($event)\">\n  @if (icon) {\n    <mat-icon>{{icon}}</mat-icon>\n  }\n  @if (text) {\n    <span>{{text}}</span>\n  }\n</button>\n@if (multiple) {\n  <input #file type=\"file\" (change)=\"onSelectFile($event)\" [accept]=\"accept\" multiple=\"multiple\" />\n} @else {\n  <input #file type=\"file\" (change)=\"onSelectFile($event)\" [accept]=\"accept\" />\n}\n\n", styles: [":host input{display:none}\n"] }]
+        args: [{ selector: 'cauca-input-file', imports: [MatButtonModule, MatIcon], template: "<button mat-raised-button (click)=\"openDialog($event)\">\r\n  @if (icon) {\r\n    <mat-icon>{{icon}}</mat-icon>\r\n  }\r\n  @if (text) {\r\n    <span>{{text}}</span>\r\n  }\r\n</button>\r\n@if (multiple) {\r\n  <input #file type=\"file\" (change)=\"onSelectFile($event)\" [accept]=\"accept\" multiple=\"multiple\" />\r\n} @else {\r\n  <input #file type=\"file\" (change)=\"onSelectFile($event)\" [accept]=\"accept\" />\r\n}\r\n\r\n", styles: [":host input{display:none}\n"] }]
     }], null, { file: [{
             type: ViewChild,
             args: ['file', { static: false }]
@@ -4226,7 +4508,7 @@ class CaucaInputMultipleLangueComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaInputMultipleLangueComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-input-multiple-langue', imports: [MatTabGroup, MatTab, MatInput, MatFormFieldModule, ReactiveFormsModule, TranslateModule], template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" (selectedIndexChange)=\"onTagChanged($event)\">\n  @for (lang of labels; track lang; let i = $index) {\n    <mat-tab [label]=\"lang\">\n      <mat-form-field hideRequiredMarker=\"never\">\n        <input matInput [placeholder]=\"lang\" [formControl]=\"forms[i]\" required=\"required\">\n        @if (forms[i].invalid) {\n          <mat-error>{{getErrorMessage(i) | translate}}</mat-error>\n        }\n      </mat-form-field>\n    </mat-tab>\n  }\n</mat-tab-group>", styles: [".mat-mdc-form-field{width:100%}\n"] }]
+        args: [{ selector: 'cauca-input-multiple-langue', imports: [MatTabGroup, MatTab, MatInput, MatFormFieldModule, ReactiveFormsModule, TranslateModule], template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" (selectedIndexChange)=\"onTagChanged($event)\">\r\n  @for (lang of labels; track lang; let i = $index) {\r\n    <mat-tab [label]=\"lang\">\r\n      <mat-form-field hideRequiredMarker=\"never\">\r\n        <input matInput [placeholder]=\"lang\" [formControl]=\"forms[i]\" required=\"required\">\r\n        @if (forms[i].invalid) {\r\n          <mat-error>{{getErrorMessage(i) | translate}}</mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </mat-tab>\r\n  }\r\n</mat-tab-group>", styles: [".mat-mdc-form-field{width:100%}\n"] }]
     }], () => [], { value: [{
             type: Input
         }] }); })();
@@ -4309,7 +4591,7 @@ class CaucaSlideshowComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaSlideshowComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-slideshow', imports: [], template: "<div #container class=\"slideshow\">\n  @for (url of images; track url; let index = $index) {\n    <div [class.active]=\"index === selectedIndex\" [class.entering]=\"states[index] === 'in'\" [class.leaving]=\"states[index] === 'out'\">\n      <img [src]=\"url\" />\n    </div>\n  }\n</div>", styles: [".slideshow{margin:0 auto;position:relative;overflow:hidden}.slideshow>div{width:100%;height:100%;position:absolute;transition:transform .5s ease-in,opacity .5s ease-in;transform:translate(100%);opacity:0}.slideshow>div.active{transform:translate(0);opacity:1}.slideshow>div.leaving{transform:translate(-100%);opacity:0}.slideshow>div.entering{transform:translate(0);opacity:1}img{max-height:100%;max-width:100%;margin:0 auto;display:block}\n"] }]
+        args: [{ selector: 'cauca-slideshow', imports: [], template: "<div #container class=\"slideshow\">\r\n  @for (url of images; track url; let index = $index) {\r\n    <div [class.active]=\"index === selectedIndex\" [class.entering]=\"states[index] === 'in'\" [class.leaving]=\"states[index] === 'out'\">\r\n      <img [src]=\"url\" />\r\n    </div>\r\n  }\r\n</div>", styles: [".slideshow{margin:0 auto;position:relative;overflow:hidden}.slideshow>div{width:100%;height:100%;position:absolute;transition:transform .5s ease-in,opacity .5s ease-in;transform:translate(100%);opacity:0}.slideshow>div.active{transform:translate(0);opacity:1}.slideshow>div.leaving{transform:translate(-100%);opacity:0}.slideshow>div.entering{transform:translate(0);opacity:1}img{max-height:100%;max-width:100%;margin:0 auto;display:block}\n"] }]
     }], null, { container: [{
             type: ViewChild,
             args: ['container', { static: true }]
@@ -4330,5 +4612,5 @@ class CaucaSlideshowComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AutoTrimAndLowerDirective, BadgeComponent, BasicButtonComponent, BreadcrumbLocation, BreadcrumbService, ButtonComponent, CaucaDateTimePickerComponent, CaucaInputFileComponent, CaucaInputMultipleLangueComponent, CaucaMaterialComponent, CaucaMaterialService, CaucaSimpleDialogComponent, CaucaSlideshowComponent, ColorPickerComponent, ConfirmationResult, DateRangePickerComponent, DialogService, DropdownChipAutocompleteComponent, ExpandablePanelAccordionComponent, ExpandablePanelComponent, FabButtonComponent, FlatButtonComponent, FormErrorModule, GroupContainerComponent, HasErrorDirective, HasErrorRootDirective, IconButtonComponent, IconComponent, Iso8601TimeSpanPipe, LinkButtonComponent, ListPaginatorComponent, LoadingErrorComponent, LoadingSpinnerIndicatorComponent, LoadingStateService, MainSectionComponent, MenuExpandablePanelComponent, MenuExpandablePanelItemComponent, MenuItemComponent, PageTitleComponent, PasswordCriteriaViewerComponent, PasswordInputComponent, PasswordSelectionComponent, RaisedButtonComponent, RefreshButtonComponent, RoundButtonComponent, SavingConfirmedBoxComponent, SavingErrorBoxComponent, SectionColumnComponent, SectionFieldComponent, SelectWithSearchComponent, SnackBarComponent, StatusMessageComponent, StrokedButtonComponent, provideCaucaMaterial };
+export { AutoTrimAndLowerDirective, BadgeComponent, BasicButtonComponent, BreadcrumbLocation, BreadcrumbService, ButtonComponent, CaucaDateTimePickerComponent, CaucaInputFileComponent, CaucaInputMultipleLangueComponent, CaucaMaterialComponent, CaucaMaterialService, CaucaSimpleDialogComponent, CaucaSlideshowComponent, ColorPickerComponent, ConfirmationResult, DateRangePickerComponent, DialogService, DropdownChipAutocompleteComponent, ExpandablePanelAccordionComponent, ExpandablePanelComponent, FabButtonComponent, FlatButtonComponent, FormErrorModule, GroupContainerComponent, HasErrorDirective, HasErrorRootDirective, IconButtonComponent, IconComponent, Iso8601TimeSpanPipe, LinkButtonComponent, ListPaginatorComponent, LoadingErrorComponent, LoadingSpinnerIndicatorComponent, LoadingStateService, MainSectionComponent, MenuExpandablePanelComponent, MenuExpandablePanelItemComponent, MenuItemComponent, PageTitleComponent, PasswordCriteriaViewerComponent, PasswordInputComponent, PasswordSelectionComponent, RaisedButtonComponent, RefreshButtonComponent, ResponsiveTabGroupWrapperComponent, RoundButtonComponent, SavingConfirmedBoxComponent, SavingErrorBoxComponent, SectionColumnComponent, SectionFieldComponent, SelectWithSearchComponent, SnackBarComponent, StatusMessageComponent, StrokedButtonComponent, provideCaucaMaterial };
 //# sourceMappingURL=cauca-911-material.mjs.map