ctt-puro 0.44.16 → 0.44.17
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/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -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: 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;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: 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 }); }
|
|
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: 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;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: 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"] }]
|
|
1587
1587
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }], propDecorators: { pretitle: [{
|
|
1588
1588
|
type: Input
|
|
1589
1589
|
}], title: [{
|