@cauca-911/material 21.0.0 → 21.0.1-beta.1

package/assets/i18n/cauca/fr-material.json

@@ -1,106 +1,106 @@
-{
-    "material": {
-        "ok": "Ok",
-        "apply": "Appliquer",
-        "cancel": "Annuler",
-        "clear": "Vider",
-        "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
-        "select": "Sélectionner",
-        "dialogTitle": "Acquisition des données",
-        "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
-        "version": "Version",
-        "refresh": "Rafraîchir"
-    },
-    "ok": "Ok",
-    "apply": "Appliquer",
-    "cancel": "Annuler",
-    "clear": "Vider",
-    "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
-    "select": "Sélectionner",
-    "dialogTitle": "Acquisition des données",
-    "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
-    "version": "Version",
-    "refresh": "Rafraîchir",
-    "errorTitle": "Erreur",
-    "edit": "Éditer",
-    "delete": "Supprimer",
-    "save": "Sauvegarder",
-    "yes": "Oui",
-    "no": "Non",
-    "close": "Fermer",
-    "copyLink": "Copier le lien",
-    "logout": "Déconnexion",
-    "search": "Rechercher",
-    "en": "Anglais",
-    "fr": "Français",
-    "es": "Espagnol",
-    "or": "OU",
-    "dateRangeSelectorLabel": "Dates",
-    "errorDialog": {
-        "titleError": "Erreur de suppression",
-        "messageError": "Une erreur est survenue lors de la suppression de \"{{itemName}}\". Veuillez réessayer plus tard."
-    },
-    "deleteDialog": {
-        "titleFemale": "Supprimer une {{itemType}}",
-        "titleMale": "Supprimer un {{itemType}}",
-        "message": "Êtes-vous sûr de vouloir supprimer l'élément \"{{itemName}}\" ?",
-        "titleError": "Erreur de suppression",
-        "messageError": "Une erreur s'est produite lors de la suppression de l'élément \"{{itemName}}\"."
-    },
-    "cancelEditionDialog": {
-        "title": "Confirmation d'annulation",
-        "message": "Vous avez des changements non sauvegardés, êtes-vous sûr de vouloir les annuler ?"
-    },
-    "validationErrorDialog": {
-        "title": "Données invalides",
-        "message": "Vous ne pouvez sauvegarder parce que vous avez des informations invalides.",
-        "messageNext": "Vous ne pouvez continuer parce que vous avez des informations invalides."
-    },
-    "alertDialog": {
-        "errorTitle": "Erreur",
-        "noResult": "Aucun résultat",
-        "genericErrorMessage": "Une erreur s'est produite, veuillez réessayer.",
-        "saveErrorMessage": "Une erreur s'est produite lors de la sauvegarde, veuillez réessayer.",
-        "loadErrorMessage": "Une erreur s'est produite lors du chargement, veuillez réessayer.",
-        "deleteErrorMessage": "Une erreur s'est produite lors de la suppression, veuillez réessayer.",
-        "creationErrorMessage": "Une erreur s'est produite lors de la création du fichier, veuillez réessayer."
-    },
-  "savingSuccessNotification": {
-    "title": "Sauvegarde",
-    "message": "La sauvegarde s'est effectuée avec succès."
-  },
-    "generalError": {
-        "errorAlertTitle": "Erreur",
-        "loadingErrorAlertTitle": "Erreur de chargement",
-        "loadingErrorAlertMessage": "Une erreur s'est produite pendant le chargement, veuillez réessayer.",
-        "savingErrorAlertTitle": "Erreur de sauvegarde",
-        "savingErrorAlertMessage": "Une erreur s'est produite pendant la sauvegarde, veuillez réessayer.",
-        "retryButtonLabel": "Réessayer"
-    },
-    "error": {
-        "requiredField": "Ce champ est obligatoire.",
-        "maxLength": "Ce champ doit avoir moins de {{value}} caractères.",
-        "valueMin": "Valeur sous minimum",
-        "valueMax": "Valeur au dessus maximum",
-        "invalidEmail": "Le courriel entré n'est pas valide",
-        "invalidPhoneNumber": "Le téléphone n'est pas valide",
-        "min": "Valeur minimale: {{value}}",
-        "max": "Valeur maximale: {{value}}",
-        "minimumCharacters": "Minimum 13 caractères",
-        "minimumNumeric": "Minimum 1 chiffre (0-9)",
-        "minimumSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, ...)",
-        "minimumUpperAndLowercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
-        "identicalPassword": "Mots de passe identiques",
-        "length": "La longueur ne doit pas dépasser {{value}} caractères."
-    },
-    "passwordEdition" : {
-        "passwordSelection": "Veuillez choisir un mot de passe.",
-        "password": "Mot de passe",
-        "passwordConfirmation": "Confirmation du mot de passe",
-        "minimumCharacters": "Minimum 13 caractères",
-        "minimumOneNumeric": "Minimum 1 chiffre (0-9)",
-        "minimumOneSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, etc.)",
-        "needLowerAndUppercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
-        "equalPasswords": "Mots de passe identiques"
-    }
-}
+{
+    "material": {
+        "ok": "Ok",
+        "apply": "Appliquer",
+        "cancel": "Annuler",
+        "clear": "Vider",
+        "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
+        "select": "Sélectionner",
+        "dialogTitle": "Acquisition des données",
+        "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+        "version": "Version",
+        "refresh": "Rafraîchir"
+    },
+    "ok": "Ok",
+    "apply": "Appliquer",
+    "cancel": "Annuler",
+    "clear": "Vider",
+    "description": "La librairie \"@cauca-911/material\" ajoute des composants basé sur @angular/material",
+    "select": "Sélectionner",
+    "dialogTitle": "Acquisition des données",
+    "dialogMessage": "Acquisition des données en cours <img src=\"/assets/images/loading.gif\" alt=\"\" width=\"20\" />",
+    "version": "Version",
+    "refresh": "Rafraîchir",
+    "errorTitle": "Erreur",
+    "edit": "Éditer",
+    "delete": "Supprimer",
+    "save": "Sauvegarder",
+    "yes": "Oui",
+    "no": "Non",
+    "close": "Fermer",
+    "copyLink": "Copier le lien",
+    "logout": "Déconnexion",
+    "search": "Rechercher",
+    "en": "Anglais",
+    "fr": "Français",
+    "es": "Espagnol",
+    "or": "OU",
+    "dateRangeSelectorLabel": "Dates",
+    "errorDialog": {
+        "titleError": "Erreur de suppression",
+        "messageError": "Une erreur est survenue lors de la suppression de \"{{itemName}}\". Veuillez réessayer plus tard."
+    },
+    "deleteDialog": {
+        "titleFemale": "Supprimer une {{itemType}}",
+        "titleMale": "Supprimer un {{itemType}}",
+        "message": "Êtes-vous sûr de vouloir supprimer l'élément \"{{itemName}}\" ?",
+        "titleError": "Erreur de suppression",
+        "messageError": "Une erreur s'est produite lors de la suppression de l'élément \"{{itemName}}\"."
+    },
+    "cancelEditionDialog": {
+        "title": "Confirmation d'annulation",
+        "message": "Vous avez des changements non sauvegardés, êtes-vous sûr de vouloir les annuler ?"
+    },
+    "validationErrorDialog": {
+        "title": "Données invalides",
+        "message": "Vous ne pouvez sauvegarder parce que vous avez des informations invalides.",
+        "messageNext": "Vous ne pouvez continuer parce que vous avez des informations invalides."
+    },
+    "alertDialog": {
+        "errorTitle": "Erreur",
+        "noResult": "Aucun résultat",
+        "genericErrorMessage": "Une erreur s'est produite, veuillez réessayer.",
+        "saveErrorMessage": "Une erreur s'est produite lors de la sauvegarde, veuillez réessayer.",
+        "loadErrorMessage": "Une erreur s'est produite lors du chargement, veuillez réessayer.",
+        "deleteErrorMessage": "Une erreur s'est produite lors de la suppression, veuillez réessayer.",
+        "creationErrorMessage": "Une erreur s'est produite lors de la création du fichier, veuillez réessayer."
+    },
+  "savingSuccessNotification": {
+    "title": "Sauvegarde",
+    "message": "La sauvegarde s'est effectuée avec succès."
+  },
+    "generalError": {
+        "errorAlertTitle": "Erreur",
+        "loadingErrorAlertTitle": "Erreur de chargement",
+        "loadingErrorAlertMessage": "Une erreur s'est produite pendant le chargement, veuillez réessayer.",
+        "savingErrorAlertTitle": "Erreur de sauvegarde",
+        "savingErrorAlertMessage": "Une erreur s'est produite pendant la sauvegarde, veuillez réessayer.",
+        "retryButtonLabel": "Réessayer"
+    },
+    "error": {
+        "requiredField": "Ce champ est obligatoire.",
+        "maxLength": "Ce champ doit avoir moins de {{value}} caractères.",
+        "valueMin": "Valeur sous minimum",
+        "valueMax": "Valeur au dessus maximum",
+        "invalidEmail": "Le courriel entré n'est pas valide",
+        "invalidPhoneNumber": "Le téléphone n'est pas valide",
+        "min": "Valeur minimale: {{value}}",
+        "max": "Valeur maximale: {{value}}",
+        "minimumCharacters": "Minimum 13 caractères",
+        "minimumNumeric": "Minimum 1 chiffre (0-9)",
+        "minimumSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, ...)",
+        "minimumUpperAndLowercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
+        "identicalPassword": "Mots de passe identiques",
+        "length": "La longueur ne doit pas dépasser {{value}} caractères."
+    },
+    "passwordEdition" : {
+        "passwordSelection": "Veuillez choisir un mot de passe.",
+        "password": "Mot de passe",
+        "passwordConfirmation": "Confirmation du mot de passe",
+        "minimumCharacters": "Minimum 13 caractères",
+        "minimumOneNumeric": "Minimum 1 chiffre (0-9)",
+        "minimumOneSpecialCharacter": "Minimum 1 caractère spécial (!, @, $, etc.)",
+        "needLowerAndUppercase": "Minimum 1 majuscule et 1 minuscule (A, z)",
+        "equalPasswords": "Mots de passe identiques"
+    }
+}

package/fesm2022/cauca-911-material.mjs

@@ -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 }); })();
 
@@ -167,7 +167,7 @@ class DesktopTimePickerComponent {
         type: Component,
         args: [{ selector: 'cauca-desktop-time-picker', 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: Input
         }], value: [{
@@ -523,7 +523,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']]
@@ -689,7 +689,7 @@ class CaucaDateTimePickerComponent {
                         multi: true,
                         useExisting: forwardRef(() => 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, { subscriptSizing: [{
             type: Input
         }], showTime: [{
@@ -1124,7 +1124,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 }); })();
 
@@ -1440,7 +1440,7 @@ class AlertDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-alert-dialog', standalone: true, 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, 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"] }]
     }], () => [{ type: i1$6.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -1500,7 +1500,7 @@ class ConfirmDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-confirm-dialog', standalone: true, 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, 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"] }]
     }], () => [{ type: i1$6.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -1708,7 +1708,7 @@ class DeleteDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeleteDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-delete-dialog', standalone: true, 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, 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"] }]
     }], () => [{ type: i1$6.MatDialogRef }, { type: DeleteDialogData, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -1753,7 +1753,7 @@ class ErrorDialogComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorDialogComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-error-dialog', standalone: true, 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, 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"] }]
     }], () => [{ type: i1$6.MatDialogRef }, { type: DeleteDialogData, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -2058,7 +2058,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()\">\n    <div class=\"mat-chip-content\">\n        <mat-icon>{{icon()}}</mat-icon>\n        <div class=\"chip-label\">{{label() | translate}}</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()\">\r\n    <div class=\"mat-chip-content\">\r\n        <mat-icon>{{icon()}}</mat-icon>\r\n        <div class=\"chip-label\">{{label() | translate}}</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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BadgeComponent, { className: "BadgeComponent", filePath: "lib/components/presenters/badge/badge.component.ts", lineNumber: 14 }); })();
 
@@ -2108,17 +2108,17 @@ class IconComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IconComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-icon', standalone: true, imports: [FontAwesomeModule], template: `
-  @if (isFontAwesome && faIcon && 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, imports: [FontAwesomeModule], template: `
+  @if (isFontAwesome && faIcon && 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: Input
@@ -2922,7 +2922,7 @@ class DropdownChipAutocompleteComponent {
                     MatChipInput,
                     MatIcon,
                     CommonModule
-                ], 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"] }]
     }], () => [{ type: i1$7.NgControl, decorators: [{
                 type: Optional
             }, {
@@ -3212,7 +3212,7 @@ class SelectWithSearchComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectWithSearchComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-select-with-search', standalone: true, 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\" [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, 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\" [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>" }]
     }], null, { label: [{
             type: Input,
             args: [{ required: true }]
@@ -3395,18 +3395,23 @@ class SectionFieldComponent {
     }], null, { autoTranslateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoTranslateLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLink", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }], splitEqually: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitEqually", required: false }] }] }); })();
 (() => { (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_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "/");
+    i0.ɵɵelementEnd();
+} }
 function PageTitleComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "/");
-    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, PageTitleComponent_Conditional_4_Conditional_1_Conditional_3_Template, 2, 0, "span");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.baseCrumb()));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, ctx_r0.baseCrumb()));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.breadcrumbLocation().length > 0 || ctx_r0.currentBreadcrumb() ? 3 : -1);
 } }
 function PageTitleComponent_Conditional_4_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 5);
@@ -3440,19 +3445,27 @@ function PageTitleComponent_Conditional_4_For_3_Conditional_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(location_r2.title);
 } }
+function PageTitleComponent_Conditional_4_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "/");
+    i0.ɵɵelementEnd();
+} }
 function PageTitleComponent_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, PageTitleComponent_Conditional_4_For_3_Conditional_0_Template, 3, 5, "a", 5)(1, PageTitleComponent_Conditional_4_For_3_Conditional_1_Template, 3, 3, "span", 6)(2, PageTitleComponent_Conditional_4_For_3_Conditional_2_Template, 2, 1, "span", 4);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "/");
-    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, PageTitleComponent_Conditional_4_For_3_Conditional_3_Template, 2, 0, "span");
 } if (rf & 2) {
     const location_r2 = ctx.$implicit;
+    const ɵ$index_19_r4 = ctx.$index;
+    const ɵ$count_19_r5 = ctx.$count;
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(location_r2.link ? 0 : location_r2.action ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!(ɵ$index_19_r4 === ɵ$count_19_r5 - 1) || ctx_r0.currentBreadcrumb() ? 3 : -1);
 } }
 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);
-    i0.ɵɵrepeaterCreate(2, PageTitleComponent_Conditional_4_For_3_Template, 5, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(1, PageTitleComponent_Conditional_4_Conditional_1_Template, 4, 4);
+    i0.ɵɵrepeaterCreate(2, PageTitleComponent_Conditional_4_For_3_Template, 4, 2, null, null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementStart(4, "span", 3);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "translate");
@@ -3497,7 +3510,7 @@ class PageTitleComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PageTitleComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-page-title', 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        <span>/</span>\n      }\n\n      @for(location of breadcrumbLocation(); track location) {\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        <span>/</span>\n      }\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"] }]
+        args: [{ selector: 'cauca-page-title', imports: [TranslateModule, RouterModule], 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\r\n      @if (baseCrumb()) {\r\n        <div class=\"basecrumb\">{{baseCrumb()|translate}}</div>\r\n        @if (breadcrumbLocation().length > 0 || currentBreadcrumb()) {\r\n          <span>/</span>\r\n        }\r\n      }\r\n\r\n      @for(location of breadcrumbLocation(); track location) {\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        @if (!$last || currentBreadcrumb()) {\r\n          <span>/</span>\r\n        }\r\n      }\r\n\r\n      <span class=\"breadcrumb-current\">{{ mustTranslateBreadcrumb() ? (currentBreadcrumb() | translate) : currentBreadcrumb() }}</span>\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}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: 13 }); })();
 
@@ -3512,7 +3525,7 @@ class ExpandablePanelComponent {
         this.isCollapsed.update(value => !value);
     }
     static { this.ɵfac = function ExpandablePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExpandablePanelComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpandablePanelComponent, selectors: [["cauca-expandable-panel"]], inputs: { isCollapsed: [1, "isCollapsed"], caption: [1, "caption"], subCaption: [1, "subCaption"] }, outputs: { isCollapsed: "isCollapsedChange" }, ngContentSelectors: _c0$2, decls: 11, vars: 6, consts: [[1, "expansion-button", 3, "click"], [1, "primary"], [1, "body2"], [1, "expansion-panel"]], template: function ExpandablePanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpandablePanelComponent, selectors: [["cauca-expandable-panel"]], inputs: { isCollapsed: [1, "isCollapsed"], caption: [1, "caption"], subCaption: [1, "subCaption"] }, outputs: { isCollapsed: "isCollapsedChange" }, ngContentSelectors: _c0$2, decls: 12, vars: 6, consts: [[1, "expansion-button", 3, "click"], [1, "primary"], [1, "body2"], [1, "expansion-panel"], [1, "expansion-panel-content"]], template: function ExpandablePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "section")(1, "div", 0);
             i0.ɵɵlistener("click", function ExpandablePanelComponent_Template_div_click_1_listener() { return ctx.changeState(); });
@@ -3525,9 +3538,9 @@ class ExpandablePanelComponent {
             i0.ɵɵelementStart(7, "div", 2);
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "div", 3);
-            i0.ɵɵprojection(10);
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 3)(10, "div", 4);
+            i0.ɵɵprojection(11);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("collapsed", ctx.isCollapsed());
@@ -3537,11 +3550,11 @@ class ExpandablePanelComponent {
             i0.ɵɵtextInterpolate(ctx.subCaption());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("collapsed", ctx.isCollapsed());
-        } }, dependencies: [MatIcon], styles: ["section[_ngcontent-%COMP%]{display:flex;padding:16px 0}.primary[_ngcontent-%COMP%]{font-weight:600}.body2[_ngcontent-%COMP%]{width:fit-content;white-space:nowrap}.expansion-button[_ngcontent-%COMP%]{display:flex;gap:4px;width:240px;padding:0 16px 8px 0;cursor:pointer;height:fit-content}.expansion-button[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{transition:transform .5s ease-in-out}.expansion-button[_ngcontent-%COMP%]   mat-icon.collapsed[_ngcontent-%COMP%]{transform:rotate(180deg)}.expansion-panel[_ngcontent-%COMP%]{overflow:hidden;flex:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s ease-in,opacity .5s ease-in,visibility .5s ease-in}.expansion-panel.collapsed[_ngcontent-%COMP%]{grid-template-rows:0fr;opacity:0;visibility:hidden}"], changeDetection: 0 }); }
+        } }, dependencies: [MatIcon], styles: ["section[_ngcontent-%COMP%]{display:flex;padding:16px 0}.primary[_ngcontent-%COMP%]{font-weight:600}.body2[_ngcontent-%COMP%]{width:fit-content;white-space:nowrap}.expansion-button[_ngcontent-%COMP%]{display:flex;gap:4px;width:240px;padding:0 16px 8px 0;cursor:pointer;height:fit-content}.expansion-button[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{transition:transform .5s ease-in-out}.expansion-button[_ngcontent-%COMP%]   mat-icon.collapsed[_ngcontent-%COMP%]{transform:rotate(180deg)}.expansion-panel[_ngcontent-%COMP%]{overflow:hidden;flex:1;display:grid;grid-template-rows:1fr;min-height:0;transition:grid-template-rows .5s ease-in,opacity .5s ease-in,visibility .5s ease-in}.expansion-panel.collapsed[_ngcontent-%COMP%]{grid-template-rows:0fr;opacity:0;visibility:hidden}.expansion-panel-content[_ngcontent-%COMP%]{min-height:0}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExpandablePanelComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<section>\r\n    <div class=\"expansion-button\" (click)=\"changeState()\">\r\n        <mat-icon [class.collapsed]=\"isCollapsed()\">expand_less</mat-icon>\r\n        <div>\r\n            <div class=\"primary\">{{caption()}}</div>\r\n            <div class=\"body2\">{{subCaption()}}</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"expansion-panel\" [class.collapsed]=\"isCollapsed()\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</section>", styles: ["section{display:flex;padding:16px 0}.primary{font-weight:600}.body2{width:fit-content;white-space:nowrap}.expansion-button{display:flex;gap:4px;width:240px;padding:0 16px 8px 0;cursor:pointer;height:fit-content}.expansion-button mat-icon{transition:transform .5s ease-in-out}.expansion-button mat-icon.collapsed{transform:rotate(180deg)}.expansion-panel{overflow:hidden;flex:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s ease-in,opacity .5s ease-in,visibility .5s ease-in}.expansion-panel.collapsed{grid-template-rows:0fr;opacity:0;visibility:hidden}\n"] }]
+        args: [{ selector: 'cauca-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], template: "<section>\r\n    <div class=\"expansion-button\" (click)=\"changeState()\">\r\n        <mat-icon [class.collapsed]=\"isCollapsed()\">expand_less</mat-icon>\r\n        <div>\r\n            <div class=\"primary\">{{caption()}}</div>\r\n            <div class=\"body2\">{{subCaption()}}</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"expansion-panel\" [class.collapsed]=\"isCollapsed()\">\r\n        <div class=\"expansion-panel-content\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["section{display:flex;padding:16px 0}.primary{font-weight:600}.body2{width:fit-content;white-space:nowrap}.expansion-button{display:flex;gap:4px;width:240px;padding:0 16px 8px 0;cursor:pointer;height:fit-content}.expansion-button mat-icon{transition:transform .5s ease-in-out}.expansion-button mat-icon.collapsed{transform:rotate(180deg)}.expansion-panel{overflow:hidden;flex:1;display:grid;grid-template-rows:1fr;min-height:0;transition:grid-template-rows .5s ease-in,opacity .5s ease-in,visibility .5s ease-in}.expansion-panel.collapsed{grid-template-rows:0fr;opacity:0;visibility:hidden}.expansion-panel-content{min-height:0}\n"] }]
     }], null, { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], subCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "subCaption", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpandablePanelComponent, { className: "ExpandablePanelComponent", filePath: "lib/components/layout/expandable-panel/expandable-panel.component.ts", lineNumber: 11 }); })();
 
@@ -3982,7 +3995,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 }); })();
 
@@ -4105,7 +4118,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 }]
@@ -4194,7 +4207,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
         }] }); })();
@@ -4277,7 +4290,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 }]