ctt-puro 0.44.16 → 0.44.18
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-advantages-small/puro-advantages-small.component.mjs +3 -3
- package/esm2022/lib/components/puro-blog-list/puro-blog-list.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid3col-slider/puro-grid3col-slider.component.mjs +3 -3
- package/esm2022/lib/components/puro-info-list/puro-info-list.component.mjs +3 -3
- package/fesm2022/ctt-puro.mjs +8 -8
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -1354,11 +1354,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1354
1354
|
|
|
1355
1355
|
class PuroAdvantagesSmallComponent {
|
|
1356
1356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroAdvantagesSmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroAdvantagesSmallComponent, isStandalone: true, selector: "lib-puro-advantages-small", inputs: { items: "items" }, ngImport: i0, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}@media (max-width: 1023.98px){.advantages__icon i{width:47px;height:43px}}@media (min-width: 1024px){.advantages__icon i{width:47px;height:47px}}.advantages__icon i{background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text{color:var(--white)
|
|
1357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroAdvantagesSmallComponent, isStandalone: true, selector: "lib-puro-advantages-small", inputs: { items: "items" }, ngImport: i0, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}@media (max-width: 1023.98px){.advantages__icon i{width:47px;height:43px}}@media (min-width: 1024px){.advantages__icon i{width:47px;height:47px}}.advantages__icon i{background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text{color:var(--white)}@media (max-width: 1023.98px){.advantages__item .advantages__text{padding-inline:3rem;padding-block:1rem}}div.advantages__text{text-align:end}span.advantages__text{text-align:start}.advantages__item .advantages__heading{color:var(--white)}:host ::ng-deep .slick-btn{color:var(--white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1358
1358
|
}
|
|
1359
1359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroAdvantagesSmallComponent, decorators: [{
|
|
1360
1360
|
type: Component,
|
|
1361
|
-
args: [{ selector: 'lib-puro-advantages-small', standalone: true, imports: [CommonModule, PuroSliderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}@media (max-width: 1023.98px){.advantages__icon i{width:47px;height:43px}}@media (min-width: 1024px){.advantages__icon i{width:47px;height:47px}}.advantages__icon i{background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text{color:var(--white)
|
|
1361
|
+
args: [{ selector: 'lib-puro-advantages-small', standalone: true, imports: [CommonModule, PuroSliderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}@media (max-width: 1023.98px){.advantages__icon i{width:47px;height:43px}}@media (min-width: 1024px){.advantages__icon i{width:47px;height:47px}}.advantages__icon i{background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text{color:var(--white)}@media (max-width: 1023.98px){.advantages__item .advantages__text{padding-inline:3rem;padding-block:1rem}}div.advantages__text{text-align:end}span.advantages__text{text-align:start}.advantages__item .advantages__heading{color:var(--white)}:host ::ng-deep .slick-btn{color:var(--white)!important}\n"] }]
|
|
1362
1362
|
}], propDecorators: { items: [{
|
|
1363
1363
|
type: Input
|
|
1364
1364
|
}] } });
|
|
@@ -1572,7 +1572,7 @@ class PuroBlogListComponent {
|
|
|
1572
1572
|
this.filteredPosts = $event.items;
|
|
1573
1573
|
}
|
|
1574
1574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogListComponent, deps: [{ token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogListComponent, isStandalone: true, selector: "lib-puro-blog-list", inputs: { pretitle: "pretitle", title: "title", posts: "posts", tags: "tags", textColors: "textColors", categoriesTitle: "categoriesTitle", categories: "categories", latestPostsTitle: "latestPostsTitle", latestPosts: "latestPosts", searchPlaceHolder: "searchPlaceHolder", notfoundText: "notfoundText", anterior: "anterior", siguiente: "siguiente", pageSize: "pageSize" }, ngImport: i0, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\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 || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroSearchComponent, selector: "lib-puro-search", inputs: ["searchPlaceHolder", "elements", "liveSearch", "fields"], outputs: ["results"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroPaginationDirective, selector: "[libPaginate]", inputs: ["libPaginate", "libPaginateItems", "libPaginatePageSize", "libPaginateCurrentPage"], outputs: ["libPaginatePageChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogListComponent, isStandalone: true, selector: "lib-puro-blog-list", inputs: { pretitle: "pretitle", title: "title", posts: "posts", tags: "tags", textColors: "textColors", categoriesTitle: "categoriesTitle", categories: "categories", latestPostsTitle: "latestPostsTitle", latestPosts: "latestPosts", searchPlaceHolder: "searchPlaceHolder", notfoundText: "notfoundText", anterior: "anterior", siguiente: "siguiente", pageSize: "pageSize" }, ngImport: i0, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\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 || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1280px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:65%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:45%;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroSearchComponent, selector: "lib-puro-search", inputs: ["searchPlaceHolder", "elements", "liveSearch", "fields"], outputs: ["results"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroPaginationDirective, selector: "[libPaginate]", inputs: ["libPaginate", "libPaginateItems", "libPaginatePageSize", "libPaginateCurrentPage"], outputs: ["libPaginatePageChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1576
1576
|
}
|
|
1577
1577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogListComponent, decorators: [{
|
|
1578
1578
|
type: Component,
|
|
@@ -1583,7 +1583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1583
1583
|
PuroDynamicHeadingComponent,
|
|
1584
1584
|
PuroPaginationDirective,
|
|
1585
1585
|
NgOptimizedImage
|
|
1586
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\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 || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"] }]
|
|
1586
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\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 || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1280px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:65%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:45%;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"] }]
|
|
1587
1587
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }], propDecorators: { pretitle: [{
|
|
1588
1588
|
type: Input
|
|
1589
1589
|
}], title: [{
|
|
@@ -6453,7 +6453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6453
6453
|
|
|
6454
6454
|
class PuroGrid3colSliderComponent {
|
|
6455
6455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colSliderComponent, isStandalone: true, selector: "lib-puro-grid3col-slider", inputs: { title: "title", button: "button", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"
|
|
6456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colSliderComponent, isStandalone: true, selector: "lib-puro-grid3col-slider", inputs: { title: "title", button: "button", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"1\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6457
6457
|
}
|
|
6458
6458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colSliderComponent, decorators: [{
|
|
6459
6459
|
type: Component,
|
|
@@ -6463,7 +6463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6463
6463
|
PuroLinkTypeDirective,
|
|
6464
6464
|
NgOptimizedImage,
|
|
6465
6465
|
PuroDynamicHeadingComponent,
|
|
6466
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"
|
|
6466
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"1\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n" }]
|
|
6467
6467
|
}], propDecorators: { title: [{
|
|
6468
6468
|
type: Input
|
|
6469
6469
|
}], button: [{
|
|
@@ -7118,11 +7118,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7118
7118
|
|
|
7119
7119
|
class PuroInfoListComponent {
|
|
7120
7120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoListComponent, isStandalone: true, selector: "lib-puro-info-list", inputs: { img: "img", backgroundImg: "backgroundImg", smallImg: "smallImg", title: "title", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width:
|
|
7121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoListComponent, isStandalone: true, selector: "lib-puro-info-list", inputs: { img: "img", backgroundImg: "backgroundImg", smallImg: "smallImg", title: "title", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase;padding-bottom:2rem}@media (min-width: 1024px){.info-list__item{padding-bottom:4rem;justify-content:flex-start}}.info-list__item__img{position:absolute;left:-30px}@media (max-width: 1024px){.info-list__item__img{position:relative;left:30px}}:host ::ng-deep .info-list__title{width:100%;transition:all .5s}@media (max-width: 1024px){:host ::ng-deep .info-list__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem;margin-bottom:2rem}}@media (min-width: 1024px){:host ::ng-deep .info-list__title{font-size:5rem;line-height:1.392;letter-spacing:.1rem;margin-bottom:3rem}}:host ::ng-deep .info-list__image--bg{animation:fan-rotate 14s ease-in-out infinite;transform-origin:center bottom;display:block}@keyframes fan-rotate{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(6deg) translateY(-4px)}50%{transform:rotate(-6deg) translateY(4px)}75%{transform:rotate(3deg) translateY(-2px)}}.info-list__wrapper{width:100%!important;height:auto!important;aspect-ratio:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7122
7122
|
}
|
|
7123
7123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoListComponent, decorators: [{
|
|
7124
7124
|
type: Component,
|
|
7125
|
-
args: [{ selector: 'lib-puro-info-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width:
|
|
7125
|
+
args: [{ selector: 'lib-puro-info-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase;padding-bottom:2rem}@media (min-width: 1024px){.info-list__item{padding-bottom:4rem;justify-content:flex-start}}.info-list__item__img{position:absolute;left:-30px}@media (max-width: 1024px){.info-list__item__img{position:relative;left:30px}}:host ::ng-deep .info-list__title{width:100%;transition:all .5s}@media (max-width: 1024px){:host ::ng-deep .info-list__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem;margin-bottom:2rem}}@media (min-width: 1024px){:host ::ng-deep .info-list__title{font-size:5rem;line-height:1.392;letter-spacing:.1rem;margin-bottom:3rem}}:host ::ng-deep .info-list__image--bg{animation:fan-rotate 14s ease-in-out infinite;transform-origin:center bottom;display:block}@keyframes fan-rotate{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(6deg) translateY(-4px)}50%{transform:rotate(-6deg) translateY(4px)}75%{transform:rotate(3deg) translateY(-2px)}}.info-list__wrapper{width:100%!important;height:auto!important;aspect-ratio:auto!important}\n"] }]
|
|
7126
7126
|
}], propDecorators: { img: [{
|
|
7127
7127
|
type: Input
|
|
7128
7128
|
}], backgroundImg: [{
|