ctt-puro 0.48.3 → 0.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/puro-timeline/puro-timeline.component.mjs +9 -3
- package/esm2022/lib/services/mapper/mapper.service.mjs +4 -3
- package/fesm2022/ctt-puro.mjs +11 -4
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/lib/components/puro-timeline/puro-timeline.component.d.ts +3 -0
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -6115,8 +6115,9 @@ class MapperService {
|
|
|
6115
6115
|
: props?.texts?.pretitle?.contain,
|
|
6116
6116
|
description: props?.texts?.description,
|
|
6117
6117
|
items: props?.multimedia?.imagenes?.map((img) => ({
|
|
6118
|
-
year: img
|
|
6119
|
-
|
|
6118
|
+
year: img?.title,
|
|
6119
|
+
subtitle: img?.subtitle,
|
|
6120
|
+
description: img?.description,
|
|
6120
6121
|
img: this.getImageResponsive(img),
|
|
6121
6122
|
})),
|
|
6122
6123
|
tags: {
|
|
@@ -8714,8 +8715,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8714
8715
|
}] } });
|
|
8715
8716
|
|
|
8716
8717
|
class PuroTimelineComponent {
|
|
8718
|
+
constructor() {
|
|
8719
|
+
this.activeIndex = null;
|
|
8720
|
+
}
|
|
8721
|
+
selectYear(index) {
|
|
8722
|
+
this.activeIndex = this.activeIndex === index ? null : index;
|
|
8723
|
+
}
|
|
8717
8724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8718
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTimelineComponent, isStandalone: true, selector: "lib-puro-timeline", inputs: { title: "title", pretitle: "pretitle", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[ngSrc], img[src]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTimelineComponent, isStandalone: true, selector: "lib-puro-timeline", inputs: { title: "title", pretitle: "pretitle", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span \n class=\"timeline__yearItem--year\"\n (click)=\"selectYear($index)\"\n [class.is-active]=\"activeIndex === $index\"\n >{{\n item.year\n }}</span>\n }\n @if (item.year && item.subtitle) {\n <div class=\"timeline__tooltip\">\n <strong>{{ item.year }}</strong> \u2013 {{ item.subtitle }}\n </div>\n }\n <div \n class=\"timeline__card\"\n [class.is-active]=\"activeIndex === $index\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[ngSrc], img[src]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8719
8726
|
}
|
|
8720
8727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTimelineComponent, decorators: [{
|
|
8721
8728
|
type: Component,
|
|
@@ -8725,7 +8732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8725
8732
|
NgOptimizedImage,
|
|
8726
8733
|
AutoImageZoomWrapperDirective,
|
|
8727
8734
|
PuroDynamicHeadingComponent,
|
|
8728
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n" }]
|
|
8735
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span \n class=\"timeline__yearItem--year\"\n (click)=\"selectYear($index)\"\n [class.is-active]=\"activeIndex === $index\"\n >{{\n item.year\n }}</span>\n }\n @if (item.year && item.subtitle) {\n <div class=\"timeline__tooltip\">\n <strong>{{ item.year }}</strong> \u2013 {{ item.subtitle }}\n </div>\n }\n <div \n class=\"timeline__card\"\n [class.is-active]=\"activeIndex === $index\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n" }]
|
|
8729
8736
|
}], propDecorators: { title: [{
|
|
8730
8737
|
type: Input
|
|
8731
8738
|
}], pretitle: [{
|