@cauca-911/material 20.2.10 → 20.2.12

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

@@ -34,6 +34,7 @@
     "save": "Save",
     "yes": "Yes",
     "no": "No",
+    "dateRangeSelectorLabel": "Dates",
     "errorDialog": {
         "titleError": "Deletion Error",
         "messageError": "An error occurred while deleting \"{{itemName}}\". Please try again later."

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

@@ -34,6 +34,7 @@
     "save": "Guardar",
     "yes": "Sí",
     "no": "No",
+    "dateRangeSelectorLabel": "Fechas",
     "errorDialog": {
         "titleError": "Error al eliminar",
         "messageError": "Ocurrió un error al eliminar \"{{itemName}}\". Por favor, inténtalo de nuevo más tarde."

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

@@ -36,7 +36,7 @@
     "es": "Espagnol",
     "or": "OU",
     "dateRangeSelectorLabel": "Dates",
-        "errorDialog": {
+    "errorDialog": {
         "titleError": "Erreur de suppression",
         "messageError": "Une erreur est survenue lors de la suppression de \"{{itemName}}\". Veuillez réessayer plus tard."
     },

package/fesm2022/cauca-911-material.mjs

@@ -43,8 +43,6 @@ import * as i5$1 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import * as i1$a from '@angular/router';
 import { RouterModule, Router, NavigationEnd } from '@angular/router';
-import { trigger, state, transition, style, AUTO_STYLE, animate } from '@angular/animations';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { MatTabGroup, MatTab } from '@angular/material/tabs';
 
 class CaucaMaterialService {
@@ -3525,7 +3523,6 @@ class PageTitleComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PageTitleComponent, { className: "PageTitleComponent", filePath: "lib/components/layout/page-title/page-title.component.ts", lineNumber: 13 }); })();
 
 const _c0$3 = ["*"];
-const DEFAULT_DURATION$1 = 500;
 class ExpandablePanelComponent {
     constructor() {
         this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
@@ -3536,7 +3533,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$3, decls: 11, vars: 4, 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$3, 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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "section")(1, "div", 0);
             i0.ɵɵlistener("click", function ExpandablePanelComponent_Template_div_click_1_listener() { return ctx.changeState(); });
@@ -3554,46 +3551,20 @@ class ExpandablePanelComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("@arrow-collapse", ctx.isCollapsed());
+            i0.ɵɵclassProp("collapsed", ctx.isCollapsed());
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.caption());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(ctx.subCaption());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("@collapse", 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-panel[_ngcontent-%COMP%]{overflow:hidden;flex:1}"], data: { animation: [
-                trigger('collapse', [
-                    state('false', style({ height: AUTO_STYLE, opacity: 1, visibility: AUTO_STYLE })),
-                    state('true', style({ height: '0', opacity: 0, visibility: 'hidden' })),
-                    transition('false => true', animate(DEFAULT_DURATION$1 + 'ms ease-in')),
-                    transition('true => false', animate(DEFAULT_DURATION$1 + 'ms ease-out'))
-                ]),
-                trigger('arrow-collapse', [
-                    state('false', style({ transform: 'rotate(0deg)' })),
-                    state('true', style({ transform: 'rotate(180deg)' })),
-                    transition('false => true', animate(DEFAULT_DURATION$1 + 'ms ease-in')),
-                    transition('true => false', animate(DEFAULT_DURATION$1 + 'ms ease-out'))
-                ])
-            ] }, changeDetection: 0 }); }
+            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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExpandablePanelComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon], animations: [
-                    trigger('collapse', [
-                        state('false', style({ height: AUTO_STYLE, opacity: 1, visibility: AUTO_STYLE })),
-                        state('true', style({ height: '0', opacity: 0, visibility: 'hidden' })),
-                        transition('false => true', animate(DEFAULT_DURATION$1 + 'ms ease-in')),
-                        transition('true => false', animate(DEFAULT_DURATION$1 + 'ms ease-out'))
-                    ]),
-                    trigger('arrow-collapse', [
-                        state('false', style({ transform: 'rotate(0deg)' })),
-                        state('true', style({ transform: 'rotate(180deg)' })),
-                        transition('false => true', animate(DEFAULT_DURATION$1 + 'ms ease-in')),
-                        transition('true => false', animate(DEFAULT_DURATION$1 + 'ms ease-out'))
-                    ])
-                ], template: "<section>\r\n    <div class=\"expansion-button\" (click)=\"changeState()\">\r\n        <mat-icon [@arrow-collapse]=\"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\" [@collapse]=\"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-panel{overflow:hidden;flex:1}\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        <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"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpandablePanelComponent, { className: "ExpandablePanelComponent", filePath: "lib/components/layout/expandable-panel/expandable-panel.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpandablePanelComponent, { className: "ExpandablePanelComponent", filePath: "lib/components/layout/expandable-panel/expandable-panel.component.ts", lineNumber: 11 }); })();
 
 class MenuExpandablePanelItemComponent {
     constructor() {
@@ -3656,21 +3627,20 @@ function MenuExpandablePanelComponent_Conditional_8_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("@arrow-collapse", ctx_r0.opened());
+    i0.ɵɵclassProp("opened", ctx_r0.opened());
 } }
 function MenuExpandablePanelComponent_Conditional_9_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "cauca-menu-expandable-panel-item", 3);
+    i0.ɵɵelement(0, "cauca-menu-expandable-panel-item", 4);
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
     i0.ɵɵproperty("icon", item_r2.icon)("caption", item_r2.title)("route", item_r2.route)("isSubItem", true)("action", item_r2.action);
 } }
 function MenuExpandablePanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MenuExpandablePanelComponent_Conditional_9_For_1_Template, 1, 5, "cauca-menu-expandable-panel-item", 3, _forTrack0);
+    i0.ɵɵrepeaterCreate(0, MenuExpandablePanelComponent_Conditional_9_For_1_Template, 1, 5, "cauca-menu-expandable-panel-item", 4, _forTrack0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r0.items());
 } }
-const DEFAULT_DURATION = 200;
 class MenuExpandablePanelComponent {
     constructor() {
         this.caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : []));
@@ -3713,7 +3683,7 @@ class MenuExpandablePanelComponent {
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuExpandablePanelComponent, selectors: [["cauca-menu-expandable-panel"]], hostVars: 10, hostBindings: function MenuExpandablePanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("border-top-left-radius", ctx.topLeftRadius)("border-top-right-radius", ctx.topRightRadius)("border-bottom-left-radius", ctx.bottomLeftRadius)("border-bottom-right-radius", ctx.bottomRightRadius);
             i0.ɵɵclassProp("bottom-border", ctx.bottomBorderClass);
-        } }, inputs: { caption: [1, "caption"], isSubItem: [1, "isSubItem"], subCaption: [1, "subCaption"], menuIcon: [1, "menuIcon"], showExpansionIcon: [1, "showExpansionIcon"], addTopBorderRadius: [1, "addTopBorderRadius"], bottomBorder: [1, "bottomBorder"], addBottomBorderRadius: [1, "addBottomBorderRadius"], route: [1, "route"], items: [1, "items"] }, decls: 10, vars: 8, consts: [[3, "click", "ngClass"], [1, "subtitle1"], [1, "body2"], [3, "icon", "caption", "route", "isSubItem", "action"]], template: function MenuExpandablePanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { caption: [1, "caption"], isSubItem: [1, "isSubItem"], subCaption: [1, "subCaption"], menuIcon: [1, "menuIcon"], showExpansionIcon: [1, "showExpansionIcon"], addTopBorderRadius: [1, "addTopBorderRadius"], bottomBorder: [1, "bottomBorder"], addBottomBorderRadius: [1, "addBottomBorderRadius"], route: [1, "route"], items: [1, "items"] }, decls: 10, vars: 8, consts: [[3, "click", "ngClass"], [1, "subtitle1"], [1, "body2"], [3, "opened"], [3, "icon", "caption", "route", "isSubItem", "action"]], template: function MenuExpandablePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "section", 0);
             i0.ɵɵlistener("click", function MenuExpandablePanelComponent_Template_section_click_0_listener() { return ctx.handleClick(); });
             i0.ɵɵelementStart(1, "mat-icon");
@@ -3725,7 +3695,7 @@ class MenuExpandablePanelComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(7, MenuExpandablePanelComponent_Conditional_7_Template, 3, 3, "div", 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, MenuExpandablePanelComponent_Conditional_8_Template, 2, 1, "mat-icon");
+            i0.ɵɵconditionalCreate(8, MenuExpandablePanelComponent_Conditional_8_Template, 2, 2, "mat-icon", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(9, MenuExpandablePanelComponent_Conditional_9_Template, 2, 0);
         } if (rf & 2) {
@@ -3740,25 +3710,11 @@ class MenuExpandablePanelComponent {
             i0.ɵɵconditional(ctx.showExpansionIcon() ? 8 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.opened() ? 9 : -1);
-        } }, dependencies: [MatIconModule, i1$1.MatIcon, TranslateModule, MenuExpandablePanelItemComponent, NgClass, i1.TranslatePipe], styles: ["[_nghost-%COMP%]{padding:10px 12px;background-color:#fff;cursor:pointer;display:block}section[_ngcontent-%COMP%]{display:flex;gap:16px;align-items:center}section.bottom-padding[_ngcontent-%COMP%]{padding-bottom:10px}div[_ngcontent-%COMP%]{flex:1}"], data: { animation: [
-                trigger('arrow-collapse', [
-                    state('false', style({ transform: 'rotate(0deg)' })),
-                    state('true', style({ transform: 'rotate(-90deg)' })),
-                    transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in-out')),
-                    transition('true => false', animate(DEFAULT_DURATION + 'ms ease-in-out'))
-                ])
-            ] } }); }
+        } }, dependencies: [MatIconModule, i1$1.MatIcon, MenuExpandablePanelItemComponent, NgClass, TranslatePipe], styles: ["[_nghost-%COMP%]{padding:10px 12px;background-color:#fff;cursor:pointer;display:block}section[_ngcontent-%COMP%]{display:flex;gap:16px;align-items:center}section[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]:last-child{transition:transform .2s ease-in-out}section[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]:last-child.opened{transform:rotate(-90deg)}section.bottom-padding[_ngcontent-%COMP%]{padding-bottom:10px}div[_ngcontent-%COMP%]{flex:1}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuExpandablePanelComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-menu-expandable-panel', imports: [MatIconModule, TranslateModule, MenuExpandablePanelItemComponent, NgClass], animations: [
-                    trigger('arrow-collapse', [
-                        state('false', style({ transform: 'rotate(0deg)' })),
-                        state('true', style({ transform: 'rotate(-90deg)' })),
-                        transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in-out')),
-                        transition('true => false', animate(DEFAULT_DURATION + 'ms ease-in-out'))
-                    ])
-                ], template: "<section [ngClass]=\"opened() ? 'bottom-padding' : ''\" (click)=\"handleClick()\">\r\n    <mat-icon>{{menuIcon()}}</mat-icon>\r\n    <div>\r\n        <div class=\"subtitle1\">{{caption() | translate}}</div>\r\n        @if(subCaption()) {<div class=\"body2\">{{subCaption() | translate}}</div>}\r\n    </div>\r\n    @if (showExpansionIcon()) {<mat-icon [@arrow-collapse]=\"opened()\">arrow_forward_ios</mat-icon>}\r\n</section>\r\n@if(opened()) {\r\n    @for (item of items(); track item.title) {\r\n        <cauca-menu-expandable-panel-item [icon]=\"item.icon\" [caption]=\"item.title\" [route]=\"item.route\" [isSubItem]=\"true\" [action]=\"item.action\" />\r\n    }\r\n}", styles: [":host{padding:10px 12px;background-color:#fff;cursor:pointer;display:block}section{display:flex;gap:16px;align-items:center}section.bottom-padding{padding-bottom:10px}div{flex:1}\n"] }]
+        args: [{ selector: 'cauca-menu-expandable-panel', imports: [MatIconModule, TranslatePipe, MenuExpandablePanelItemComponent, NgClass], template: "<section [ngClass]=\"opened() ? 'bottom-padding' : ''\" (click)=\"handleClick()\">\r\n    <mat-icon>{{menuIcon()}}</mat-icon>\r\n    <div>\r\n        <div class=\"subtitle1\">{{caption() | translate}}</div>\r\n        @if(subCaption()) {<div class=\"body2\">{{subCaption() | translate}}</div>}\r\n    </div>\r\n    @if (showExpansionIcon()) {<mat-icon [class.opened]=\"opened()\">arrow_forward_ios</mat-icon>}\r\n</section>\r\n@if(opened()) {\r\n    @for (item of items(); track item.title) {\r\n        <cauca-menu-expandable-panel-item [icon]=\"item.icon\" [caption]=\"item.title\" [route]=\"item.route\" [isSubItem]=\"true\" [action]=\"item.action\" />\r\n    }\r\n}", styles: [":host{padding:10px 12px;background-color:#fff;cursor:pointer;display:block}section{display:flex;gap:16px;align-items:center}section mat-icon:last-child{transition:transform .2s ease-in-out}section mat-icon:last-child.opened{transform:rotate(-90deg)}section.bottom-padding{padding-bottom:10px}div{flex:1}\n"] }]
     }], null, { topLeftRadius: [{
             type: HostBinding,
             args: ['style.border-top-left-radius']
@@ -3775,7 +3731,7 @@ class MenuExpandablePanelComponent {
             type: HostBinding,
             args: ['class.bottom-border']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuExpandablePanelComponent, { className: "MenuExpandablePanelComponent", filePath: "lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuExpandablePanelComponent, { className: "MenuExpandablePanelComponent", filePath: "lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.ts", lineNumber: 13 }); })();
 
 function SavingConfirmedBoxComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -3993,7 +3949,6 @@ class FormErrorModule {
 
 function provideCaucaMaterial() {
     return [
-        provideAnimations(),
         provideNativeDateAdapter(),
         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
     ];
@@ -4584,17 +4539,17 @@ class MenuItem {
 }
 
 const _c0 = ["container"];
-function CaucaSlideshowComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "img", 3);
-    i0.ɵɵelementEnd();
+function CaucaSlideshowComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div");
+    i0.ɵɵdomElement(1, "img", 3);
+    i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const url_r1 = ctx.$implicit;
-    const index_r2 = ctx.index;
+    const ɵ$index_3_r2 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("@slideLeftRight", ctx_r2.getState(index_r2));
+    i0.ɵɵclassProp("active", ɵ$index_3_r2 === ctx_r2.selectedIndex)("entering", ctx_r2.states[ɵ$index_3_r2] === "in")("leaving", ctx_r2.states[ɵ$index_3_r2] === "out");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", url_r1, i0.ɵɵsanitizeUrl);
+    i0.ɵɵdomProperty("src", url_r1, i0.ɵɵsanitizeUrl);
 } }
 class CaucaSlideshowComponent {
     constructor() {
@@ -4649,64 +4604,18 @@ class CaucaSlideshowComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-        } }, inputs: { height: "height", autoPlay: "autoPlay", images: "images" }, decls: 3, vars: 1, consts: [["container", ""], [1, "slideshow"], [4, "ngFor", "ngForOf"], [3, "src"]], template: function CaucaSlideshowComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1, 0);
-            i0.ɵɵtemplate(2, CaucaSlideshowComponent_div_2_Template, 2, 2, "div", 2);
-            i0.ɵɵelementEnd();
+        } }, inputs: { height: "height", autoPlay: "autoPlay", images: "images" }, decls: 4, vars: 0, consts: [["container", ""], [1, "slideshow"], [3, "active", "entering", "leaving"], [3, "src"]], template: function CaucaSlideshowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1, 0);
+            i0.ɵɵrepeaterCreate(2, CaucaSlideshowComponent_For_3_Template, 2, 7, "div", 2, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.images);
-        } }, dependencies: [CommonModule, i1$3.NgForOf], styles: [".slideshow[_ngcontent-%COMP%]{margin:0 auto;position:relative;overflow:hidden}.slideshow[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{width:100%;height:100%;position:absolute}img[_ngcontent-%COMP%]{max-height:100%;max-width:100%;margin:0 auto;display:block}"], data: { animation: [
-                trigger('slideUpDown', [
-                    state('in', style({ transform: 'translateY(0%)' })),
-                    state('out', style({ transform: 'translateY(-100%)' })),
-                    transition('in => out', [
-                        animate('500ms ease-in')
-                    ]),
-                    transition('out => in', [
-                        style({ transform: 'translateY(100%)' }),
-                        animate('500ms ease-in')
-                    ]),
-                ]),
-                trigger('slideLeftRight', [
-                    state('in', style({ transform: 'translateX(0%)' })),
-                    state('out', style({ transform: 'translateX(-100%)' })),
-                    transition('in => out', [
-                        animate('500ms ease-in')
-                    ]),
-                    transition('out => in', [
-                        style({ transform: 'translateX(100%)' }),
-                        animate('500ms ease-in')
-                    ]),
-                ]),
-            ] } }); }
+            i0.ɵɵrepeater(ctx.images);
+        } }, dependencies: [CommonModule], styles: [".slideshow[_ngcontent-%COMP%]{margin:0 auto;position:relative;overflow:hidden}.slideshow[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{width:100%;height:100%;position:absolute;transition:transform .5s ease-in,opacity .5s ease-in;transform:translate(100%);opacity:0}.slideshow[_ngcontent-%COMP%] > div.active[_ngcontent-%COMP%]{transform:translate(0);opacity:1}.slideshow[_ngcontent-%COMP%] > div.leaving[_ngcontent-%COMP%]{transform:translate(-100%);opacity:0}.slideshow[_ngcontent-%COMP%] > div.entering[_ngcontent-%COMP%]{transform:translate(0);opacity:1}img[_ngcontent-%COMP%]{max-height:100%;max-width:100%;margin:0 auto;display:block}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaSlideshowComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-slideshow', imports: [CommonModule], animations: [
-                    trigger('slideUpDown', [
-                        state('in', style({ transform: 'translateY(0%)' })),
-                        state('out', style({ transform: 'translateY(-100%)' })),
-                        transition('in => out', [
-                            animate('500ms ease-in')
-                        ]),
-                        transition('out => in', [
-                            style({ transform: 'translateY(100%)' }),
-                            animate('500ms ease-in')
-                        ]),
-                    ]),
-                    trigger('slideLeftRight', [
-                        state('in', style({ transform: 'translateX(0%)' })),
-                        state('out', style({ transform: 'translateX(-100%)' })),
-                        transition('in => out', [
-                            animate('500ms ease-in')
-                        ]),
-                        transition('out => in', [
-                            style({ transform: 'translateX(100%)' }),
-                            animate('500ms ease-in')
-                        ]),
-                    ]),
-                ], template: "<div #container class=\"slideshow\">\n  <div *ngFor=\"let url of images; let index = index;\" [@slideLeftRight]=\"getState(index)\">\n    <img [src]=\"url\" />\n  </div>\n</div>", styles: [".slideshow{margin:0 auto;position:relative;overflow:hidden}.slideshow>div{width:100%;height:100%;position:absolute}img{max-height:100%;max-width:100%;margin:0 auto;display:block}\n"] }]
+        args: [{ selector: 'cauca-slideshow', imports: [CommonModule], 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"] }]
     }], null, { container: [{
             type: ViewChild,
             args: ['container', { static: true }]
@@ -4717,7 +4626,7 @@ class CaucaSlideshowComponent {
         }], images: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSlideshowComponent, { className: "CaucaSlideshowComponent", filePath: "lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaSlideshowComponent, { className: "CaucaSlideshowComponent", filePath: "lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.ts", lineNumber: 10 }); })();
 
 /*
  * Public API Surface of cauca-material