ctt-puro 0.71.13 → 0.71.15
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
|
@@ -1996,7 +1996,7 @@ class PuroBlogListComponent {
|
|
|
1996
1996
|
this.filteredPosts = $event.items;
|
|
1997
1997
|
}
|
|
1998
1998
|
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 }); }
|
|
1999
|
-
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 [src]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\" loading=\"lazy\" />\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 <div\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></div>\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 pagination__control--prev\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <i class=\"icon-6\"></i>\n </button>\n <button\n class=\"btn btn__primary--outline pagination__control--next\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <i class=\"icon-6\"></i>\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{max-width:640px;padding-block:8rem;padding-inline:5rem}@media (min-width: 1280px){.puro__blog-list{max-width:1900px;padding-block:10rem;padding-inline:9.5rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}@media (max-width: 1279.98px){.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:6rem}@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:8rem;width:100%;max-width:700px}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8{max-width:1191px}}.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: 1366px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row}}.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:3rem;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{text-transform:uppercase;font-family:Gilroy,sans-serif;font-weight:700;font-style:normal;color:var(--cl-title);margin-bottom:2.3rem;font-size:2rem;line-height:1.213;letter-spacing:.04rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding:4.2rem 5rem;display:flex;flex-direction:column;justify-content:center;text-align:center}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;padding:4.8rem 5.7rem}}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-block:6.8rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2.2rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:2.1428571429;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 .cs_subtitle ::ng-deep p+p{margin-top:0rem}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-family:Gilroy,sans-serif;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{display:flex;flex-wrap:wrap;justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:70%;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;gap:5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i){opacity:1;width:auto;min-width:0rem;padding:0rem;border:none;background:none;color:#616160;font-size:4.5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):disabled{color:#616160}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i) i{transition:all .5s}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i).pagination__control--prev i{transform:rotate(-180deg)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover{color:var(--cl-title)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover i{transform:scale(1.3)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover.pagination__control--prev i{transform:rotate(-180deg) scale(1.3)}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-4{width:100%}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:42%!important;padding-left:7.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: 1280px){.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: 1280px){.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: 1280px){.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:2.3rem;padding-bottom:.7rem;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{margin-bottom:4.5rem;padding-bottom:2.9rem}}.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.5rem;padding-bottom:1.6rem;transition:all .5s;margin-inline:auto;color:#616160;font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}.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:2rem;padding-top:2.2rem}@media (min-width: 1280px){.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;padding-top:3.8rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:first-child{padding-top:.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;margin-bottom:.6rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}.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.6rem;line-height:1.364625;letter-spacing:.16rem}@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:2rem;line-height:1.213;letter-spacing:.04rem}}.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:10px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}@media (min-width: 1680px){.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{margin-top:1.2rem}}:host ::ng-deep .puro__blog-list--pretitle{text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:1.88rem;font-size:2.2rem;line-height:1;letter-spacing:.22rem}:host ::ng-deep .puro__blog-list--title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}: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}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item{margin-bottom:6.7rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:1.6rem;font-size:2.6rem;line-height:1;letter-spacing:.26rem}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{margin-bottom:1.8rem}}\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: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1999
|
+
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 [src]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\" loading=\"lazy\" />\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 <div\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></div>\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 pagination__control--prev\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <i class=\"icon-6\"></i>\n </button>\n <button\n class=\"btn btn__primary--outline pagination__control--next\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <i class=\"icon-6\"></i>\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{max-width:640px;padding-block:8rem;padding-inline:5rem}@media (min-width: 1280px){.puro__blog-list{max-width:1900px;padding-block:6rem;padding-inline:9.5rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:6rem}@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:8rem;width:100%;max-width:700px}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8{max-width:1191px}}.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: 1366px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row}}.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:3rem;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{text-transform:uppercase;font-family:Gilroy,sans-serif;font-weight:700;font-style:normal;color:var(--cl-title);margin-bottom:2.3rem;font-size:2rem;line-height:1.213;letter-spacing:.04rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding:2.1rem 1rem;display:flex;flex-direction:column;justify-content:center;text-align:center}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;padding:4.8rem 5.7rem}}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-block:6.8rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2.2rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem;color:var(--grey)}@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 .cs_subtitle ::ng-deep h1,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep h2,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep h3{font-family:Gilroy,sans-serif}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep p+p{margin-top:0rem}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-family:Gilroy,sans-serif;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{display:flex;flex-wrap:wrap;justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:70%;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;gap:5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i){opacity:1;width:auto;min-width:0rem;padding:0rem;border:none;background:none;color:#616160;font-size:4.5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):disabled{color:#616160}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i) i{transition:all .5s}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i).pagination__control--prev i{transform:rotate(-180deg)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover{color:var(--cl-title)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover i{transform:scale(1.3)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover.pagination__control--prev i{transform:rotate(-180deg) scale(1.3)}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-4{width:100%}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:42%!important;padding-left:7.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: 1280px){.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: 1280px){.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: 1280px){.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:2.3rem;padding-bottom:.7rem;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{margin-bottom:4.5rem;padding-bottom:2.9rem}}.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.5rem;padding-bottom:1.6rem;transition:all .5s;margin-inline:auto;color:#616160;font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}.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:2rem;padding-top:2.2rem}@media (min-width: 1280px){.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;padding-top:3.8rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:first-child{padding-top:.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;margin-bottom:.6rem;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem;color:var(--cl-title)}@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:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.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.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:2rem;line-height:1.213;letter-spacing:.04rem}}.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:10px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}@media (min-width: 1680px){.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{margin-top:1.2rem}}:host ::ng-deep .puro__blog-list--pretitle{text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:1.88rem;font-size:2.2rem;line-height:1;letter-spacing:.22rem}:host ::ng-deep .puro__blog-list--title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}: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}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item{margin-bottom:6.7rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:1.6rem;font-size:2rem;line-height:1;letter-spacing:.2rem}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{margin-bottom:1.8rem;font-size:2.6rem;line-height:1;letter-spacing:.26rem}}\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: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2000
2000
|
}
|
|
2001
2001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogListComponent, decorators: [{
|
|
2002
2002
|
type: Component,
|
|
@@ -2007,7 +2007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2007
2007
|
PuroDynamicHeadingComponent,
|
|
2008
2008
|
PuroPaginationDirective,
|
|
2009
2009
|
AutoImageZoomWrapperDirective,
|
|
2010
|
-
], 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 [src]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\" loading=\"lazy\" />\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 <div\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></div>\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 pagination__control--prev\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <i class=\"icon-6\"></i>\n </button>\n <button\n class=\"btn btn__primary--outline pagination__control--next\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <i class=\"icon-6\"></i>\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{max-width:640px;padding-block:8rem;padding-inline:5rem}@media (min-width: 1280px){.puro__blog-list{max-width:1900px;padding-block:10rem;padding-inline:9.5rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}@media (max-width: 1279.98px){.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:6rem}@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:8rem;width:100%;max-width:700px}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8{max-width:1191px}}.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: 1366px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row}}.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:3rem;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{text-transform:uppercase;font-family:Gilroy,sans-serif;font-weight:700;font-style:normal;color:var(--cl-title);margin-bottom:2.3rem;font-size:2rem;line-height:1.213;letter-spacing:.04rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding:4.2rem 5rem;display:flex;flex-direction:column;justify-content:center;text-align:center}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;padding:4.8rem 5.7rem}}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-block:6.8rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2.2rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:2.1428571429;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 .cs_subtitle ::ng-deep p+p{margin-top:0rem}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-family:Gilroy,sans-serif;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{display:flex;flex-wrap:wrap;justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:70%;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;gap:5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i){opacity:1;width:auto;min-width:0rem;padding:0rem;border:none;background:none;color:#616160;font-size:4.5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):disabled{color:#616160}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i) i{transition:all .5s}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i).pagination__control--prev i{transform:rotate(-180deg)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover{color:var(--cl-title)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover i{transform:scale(1.3)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover.pagination__control--prev i{transform:rotate(-180deg) scale(1.3)}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-4{width:100%}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:42%!important;padding-left:7.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: 1280px){.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: 1280px){.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: 1280px){.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:2.3rem;padding-bottom:.7rem;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{margin-bottom:4.5rem;padding-bottom:2.9rem}}.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.5rem;padding-bottom:1.6rem;transition:all .5s;margin-inline:auto;color:#616160;font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}.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:2rem;padding-top:2.2rem}@media (min-width: 1280px){.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;padding-top:3.8rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:first-child{padding-top:.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;margin-bottom:.6rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}.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.6rem;line-height:1.364625;letter-spacing:.16rem}@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:2rem;line-height:1.213;letter-spacing:.04rem}}.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:10px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}@media (min-width: 1680px){.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{margin-top:1.2rem}}:host ::ng-deep .puro__blog-list--pretitle{text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:1.88rem;font-size:2.2rem;line-height:1;letter-spacing:.22rem}:host ::ng-deep .puro__blog-list--title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}: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}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item{margin-bottom:6.7rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:1.6rem;font-size:2.6rem;line-height:1;letter-spacing:.26rem}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{margin-bottom:1.8rem}}\n"] }]
|
|
2010
|
+
], 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 [src]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\" loading=\"lazy\" />\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 <div\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></div>\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 pagination__control--prev\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <i class=\"icon-6\"></i>\n </button>\n <button\n class=\"btn btn__primary--outline pagination__control--next\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <i class=\"icon-6\"></i>\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{max-width:640px;padding-block:8rem;padding-inline:5rem}@media (min-width: 1280px){.puro__blog-list{max-width:1900px;padding-block:6rem;padding-inline:9.5rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:6rem}@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:8rem;width:100%;max-width:700px}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8{max-width:1191px}}.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: 1366px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row}}.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:3rem;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{text-transform:uppercase;font-family:Gilroy,sans-serif;font-weight:700;font-style:normal;color:var(--cl-title);margin-bottom:2.3rem;font-size:2rem;line-height:1.213;letter-spacing:.04rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding:2.1rem 1rem;display:flex;flex-direction:column;justify-content:center;text-align:center}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;padding:4.8rem 5.7rem}}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-block:6.8rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2.2rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem;color:var(--grey)}@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 .cs_subtitle ::ng-deep h1,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep h2,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep h3{font-family:Gilroy,sans-serif}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle ::ng-deep p+p{margin-top:0rem}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-family:Gilroy,sans-serif;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h1:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h2:first-child,.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle>::ng-deep h3:first-child{font-size:2rem;line-height:1.213;letter-spacing:.04rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{display:flex;flex-wrap:wrap;justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:70%;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;gap:5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i){opacity:1;width:auto;min-width:0rem;padding:0rem;border:none;background:none;color:#616160;font-size:4.5rem}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):disabled{color:#616160}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i) i{transition:all .5s}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i).pagination__control--prev i{transform:rotate(-180deg)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover{color:var(--cl-title)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover i{transform:scale(1.3)}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group .btn:has(i):not(:disabled):hover.pagination__control--prev i{transform:rotate(-180deg) scale(1.3)}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-4{width:100%}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:42%!important;padding-left:7.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: 1280px){.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: 1280px){.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: 1280px){.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:2.3rem;padding-bottom:.7rem;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{margin-bottom:4.5rem;padding-bottom:2.9rem}}.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.5rem;padding-bottom:1.6rem;transition:all .5s;margin-inline:auto;color:#616160;font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}.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:2rem;padding-top:2.2rem}@media (min-width: 1280px){.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;padding-top:3.8rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:first-child{padding-top:.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;margin-bottom:.6rem;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem;color:var(--cl-title)}@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:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}}.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.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:2rem;line-height:1.213;letter-spacing:.04rem}}.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:10px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}@media (min-width: 1680px){.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{margin-top:1.2rem}}:host ::ng-deep .puro__blog-list--pretitle{text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:1.88rem;font-size:2.2rem;line-height:1;letter-spacing:.22rem}:host ::ng-deep .puro__blog-list--title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}: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}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item{margin-bottom:6.7rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:400;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:1.6rem;font-size:2rem;line-height:1;letter-spacing:.2rem}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{margin-bottom:1.8rem;font-size:2.6rem;line-height:1;letter-spacing:.26rem}}\n"] }]
|
|
2011
2011
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }], propDecorators: { pretitle: [{
|
|
2012
2012
|
type: Input
|
|
2013
2013
|
}], title: [{
|
|
@@ -2073,7 +2073,7 @@ class PuroBlogPostComponent {
|
|
|
2073
2073
|
return !!(this.categoriesTitle || this.relatedPostsTitle);
|
|
2074
2074
|
}
|
|
2075
2075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogPostComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogPostComponent, isStandalone: true, selector: "lib-puro-blog-post", inputs: { title: "title", subtitle: "subtitle", description: "description", additional1: "additional1", additional2: "additional2", additional3: "additional3", additional4: "additional4", img: "img", tags: "tags", textColors: "textColors", button: "button", category: "category", date: "date", categories: "categories", relatedPostsTitle: "relatedPostsTitle", categoriesTitle: "categoriesTitle", relatedPosts: "relatedPosts", searchPlaceHolder: "searchPlaceHolder", share: "share" }, ngImport: i0, template: "<section class=\"puro__blog-detail margin-main\">\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back alone\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"intro_info title-container col-lg-8 offset-lg-2\">\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (category?.length || date) {\n <div class=\"puro__blog-detail--info\">\n @if (category) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'span'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.subtitle\"\n [content]=\"category\"\n ></lib-puro-dynamic-heading>\n }\n @if (date) {\n <span [class]=\"category ? 'withDot' : ''\">{{\n date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n <div\n [ngClass]=\"\n hasSidebar ? 'col-lg-8' : 'col-lg-12' + ' offset-lg-2'\n \"\n >\n <div class=\"cs_blog_details\">\n <div class=\"intro_info no-align\">\n @if (description) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"description\"\n ></div>\n }\n @if (additional1) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional1\"\n ></div>\n }\n <div class=\"cs_image_layer cs_about_img\">\n @if (img) {\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"cs--radius\"\n width=\"1130\"\n height=\"645\" loading=\"lazy\" />\n }\n </div>\n @if (additional2) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional2\"\n ></div>\n }\n @if (additional3) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional3\"\n ></div>\n }\n @if (additional4) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional4\"\n ></div>\n }\n </div>\n </div>\n <div class=\"puro__blog-detail--footer\">\n <div class=\"cs_post_share d-lg-none\">\n <ng-container\n [ngTemplateOutlet]=\"shareButtons\"\n ></ng-container>\n </div>\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n </div>\n </div>\n @if (hasSidebar) {\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\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=\"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 && categories.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[0],\n }\"\n >\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories && categories.length) {\n <ul>\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (relatedPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\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 (relatedPosts?.length) {\n <ul\n class=\"cs_recent_posts\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[1],\n }\"\n >\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n\n @if (post.date) {\n <em\n class=\"text--small\"\n >{{\n post.date\n | date\n : 'mediumDate'\n }}</em\n >\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (relatedPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (relatedPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n @if (post?.date) {\n <em class=\"text--small\">\n {{\n post?.date\n | date\n : 'dd/MM/yyyy'\n }}\n </em>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n }\n <ng-template #shareButtons>\n <div class=\"cs_social_share_btns\">\n <a\n [href]=\"facebookShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en Facebook\"\n class=\"share-facebook\"\n >\n <i class=\"icon-5\"></i>\n </a>\n <a\n [href]=\"twitterShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en X\"\n class=\"share-twitter\"\n >\n <i class=\"icon-4\"></i>\n </a>\n <a\n [href]=\"linkedinShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en LinkedIn\"\n class=\"share-linkedin\"\n >\n <i class=\"icon-2\"></i>\n </a>\n </div>\n </ng-template>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-detail{max-width:678px;margin-inline:auto;padding-block:9.1rem 4.8rem;padding-inline:5rem}@media (min-width: 1024px){.puro__blog-detail{max-width:1257px;padding-block:9.3rem 5.3rem}}@media (min-width: 1680px){.puro__blog-detail{padding-block:8.7rem 6.7rem}}.puro__blog-detail .cs_social_share_btns{display:flex;gap:3rem;align-items:center;height:100%}.puro__blog-detail .cs_social_share_btns i{color:#616160;font-size:20px}.puro__blog-detail .container-fluid .intro_info{display:flex;flex-direction:column}.puro__blog-detail .container-fluid .intro_info .cs_image_layer{margin-block:4rem}.puro__blog-detail .container-fluid .intro_info .cs_image_layer img{width:100%;aspect-ratio:1009/576;object-fit:cover}.puro__blog-detail .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-detail .row{flex-direction:row;gap:0px}}.puro__blog-detail .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-detail .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4{width:33.33%}}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-detail .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-detail .row .col-lg-4 .blog-list__items--collapsed{height:0;margin:0;overflow:hidden;transition:all .2s}.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:4.5rem;margin-bottom:4.5rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:last-child{margin-bottom:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{display:flex;justify-content:space-between}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;padding-top:2rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1.4rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{padding-top:4rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-detail .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-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-detail .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}.puro__blog-detail .row .col-lg-12{width:100%}.puro__blog-detail--info{display:flex;text-transform:uppercase;margin-bottom:4rem;opacity:.8;gap:1rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-detail--info{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}.puro__blog-detail--info .withDot:before{content:\"-\";margin-right:1rem}.puro__blog-detail--text{display:block;width:100%;text-align:left;color:#616160;opacity:.8;margin-top:0rem;margin-bottom:4rem;font-size:2rem;line-height:1.7;letter-spacing:.06rem}.puro__blog-detail--text:has(+.cs_image_layer){margin-bottom:0rem}.puro__blog-detail--back{margin-left:auto}.puro__blog-detail--back:not(:last-child){margin-bottom:4rem}.puro__blog-detail--back .btn{color:#616160;border:none;background:transparent;width:fit-content;padding:0;min-width:min-content}.puro__blog-detail--back .btn i{margin-right:2rem;font-size:12px}.puro__blog-detail--back .btn.alone{margin-bottom:4rem}.puro__blog-detail--footer{opacity:.8;display:flex;border-top:1px solid rgba(97,97,96,.2);padding-top:3.4rem;justify-content:space-between}:host ::ng-deep .puro__blog-detail--pretitle{opacity:.8;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:4rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-family:Cralika;margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}:host ::ng-deep .sidebar_item--title{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}:host ::ng-deep .puro__blog-detail--text em{font-style:italic!important}:host ::ng-deep .puro__blog-detail--text strong{font-weight:700!important}:host ::ng-deep .puro__blog-detail--text p:not(:first-child),:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{margin-top:2rem}:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{list-style:revert!important;padding-left:2em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogPostComponent, isStandalone: true, selector: "lib-puro-blog-post", inputs: { title: "title", subtitle: "subtitle", description: "description", additional1: "additional1", additional2: "additional2", additional3: "additional3", additional4: "additional4", img: "img", tags: "tags", textColors: "textColors", button: "button", category: "category", date: "date", categories: "categories", relatedPostsTitle: "relatedPostsTitle", categoriesTitle: "categoriesTitle", relatedPosts: "relatedPosts", searchPlaceHolder: "searchPlaceHolder", share: "share" }, ngImport: i0, template: "<section class=\"puro__blog-detail margin-main\">\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back alone\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"intro_info title-container col-lg-8 offset-lg-2\">\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (category?.length || date) {\n <div class=\"puro__blog-detail--info\">\n @if (category) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'span'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.subtitle\"\n [content]=\"category\"\n ></lib-puro-dynamic-heading>\n }\n @if (date) {\n <span [class]=\"category ? 'withDot' : ''\">{{\n date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n <div\n [ngClass]=\"\n hasSidebar ? 'col-lg-8' : 'col-lg-12' + ' offset-lg-2'\n \"\n >\n <div class=\"cs_blog_details\">\n <div class=\"intro_info no-align\">\n @if (description) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"description\"\n ></div>\n }\n @if (additional1) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional1\"\n ></div>\n }\n <div class=\"cs_image_layer cs_about_img\">\n @if (img) {\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"cs--radius\"\n width=\"1130\"\n height=\"645\" loading=\"lazy\" />\n }\n </div>\n @if (additional2) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional2\"\n ></div>\n }\n @if (additional3) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional3\"\n ></div>\n }\n @if (additional4) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional4\"\n ></div>\n }\n </div>\n </div>\n <div class=\"puro__blog-detail--footer\">\n <div class=\"cs_post_share d-lg-none\">\n <ng-container\n [ngTemplateOutlet]=\"shareButtons\"\n ></ng-container>\n </div>\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n </div>\n </div>\n @if (hasSidebar) {\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\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=\"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 && categories.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[0],\n }\"\n >\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories && categories.length) {\n <ul>\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (relatedPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\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 (relatedPosts?.length) {\n <ul\n class=\"cs_recent_posts\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[1],\n }\"\n >\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n\n @if (post.date) {\n <em\n class=\"text--small\"\n >{{\n post.date\n | date\n : 'mediumDate'\n }}</em\n >\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (relatedPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (relatedPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n @if (post?.date) {\n <em class=\"text--small\">\n {{\n post?.date\n | date\n : 'dd/MM/yyyy'\n }}\n </em>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n }\n <ng-template #shareButtons>\n <div class=\"cs_social_share_btns\">\n <a\n [href]=\"facebookShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en Facebook\"\n class=\"share-facebook\"\n >\n <i class=\"icon-5\"></i>\n </a>\n <a\n [href]=\"twitterShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en X\"\n class=\"share-twitter\"\n >\n <i class=\"icon-4\"></i>\n </a>\n <a\n [href]=\"linkedinShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en LinkedIn\"\n class=\"share-linkedin\"\n >\n <i class=\"icon-2\"></i>\n </a>\n </div>\n </ng-template>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-detail{max-width:678px;margin-inline:auto;padding-block:9.1rem 4.8rem;padding-inline:5rem}@media (min-width: 1024px){.puro__blog-detail{max-width:1257px;padding-block:9.3rem 5.3rem}}@media (min-width: 1680px){.puro__blog-detail{padding-block:8.7rem 6.7rem}}.puro__blog-detail .cs_social_share_btns{display:flex;gap:3rem;align-items:center;height:100%}.puro__blog-detail .cs_social_share_btns i{color:#616160;font-size:20px}.puro__blog-detail .container-fluid .intro_info{display:flex;flex-direction:column}.puro__blog-detail .container-fluid .intro_info .cs_image_layer{margin-block:4rem}.puro__blog-detail .container-fluid .intro_info .cs_image_layer img{width:100%;aspect-ratio:1009/576;object-fit:cover}.puro__blog-detail .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-detail .row{flex-direction:row;gap:0px}}.puro__blog-detail .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-detail .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4{width:33.33%}}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-detail .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-detail .row .col-lg-4 .blog-list__items--collapsed{height:0;margin:0;overflow:hidden;transition:all .2s}.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:4.5rem;margin-bottom:4.5rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:last-child{margin-bottom:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{display:flex;justify-content:space-between}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;padding-top:2rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1.4rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{padding-top:4rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-detail .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-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-detail .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}.puro__blog-detail .row .col-lg-12{width:100%}.puro__blog-detail--info{display:flex;text-transform:uppercase;margin-bottom:4rem;opacity:.8;gap:1rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-detail--info{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}.puro__blog-detail--info .withDot:before{content:\"-\";margin-right:1rem}.puro__blog-detail--text{display:block;width:100%;text-align:left;color:#616160;opacity:.8;margin-top:0rem;margin-bottom:4rem;font-size:2rem;line-height:1.7;letter-spacing:.06rem}.puro__blog-detail--text:has(+.cs_image_layer){margin-bottom:0rem}.puro__blog-detail--back{margin-left:auto}.puro__blog-detail--back:not(:last-child){margin-bottom:4rem}.puro__blog-detail--back .btn{color:var(--cl-title);border:none;background:transparent;width:fit-content;padding:0;min-width:min-content}.puro__blog-detail--back .btn i{margin-right:2rem;font-size:12px}.puro__blog-detail--back .btn.alone{margin-bottom:4rem}.puro__blog-detail--footer{opacity:.8;display:flex;border-top:1px solid rgba(97,97,96,.2);padding-top:3.4rem;justify-content:space-between}:host ::ng-deep .puro__blog-detail--pretitle{opacity:1;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:4rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem;color:#616160}:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-family:Cralika;margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem;color:var(--cl-title)}@media (min-width: 768px){:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}:host ::ng-deep .puro__blog-detail--info{opacity:1;color:#616160}:host ::ng-deep .sidebar_item--title{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}:host ::ng-deep .puro__blog-detail--text{opacity:1}:host ::ng-deep .puro__blog-detail--text em{font-style:italic!important}:host ::ng-deep .puro__blog-detail--text strong{font-weight:700!important}:host ::ng-deep .puro__blog-detail--text p:not(:first-child),:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{margin-top:2rem}:host ::ng-deep .puro__blog-detail--text h1,:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text h5,:host ::ng-deep .puro__blog-detail--text h6{color:var(--cl-title)}:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{list-style:revert!important;padding-left:2em}:host ::ng-deep .puro__blog-detail--text ul li::marker,:host ::ng-deep .puro__blog-detail--text ol li::marker{color:var(--cl-title)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2077
2077
|
}
|
|
2078
2078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogPostComponent, decorators: [{
|
|
2079
2079
|
type: Component,
|
|
@@ -2082,7 +2082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2082
2082
|
PuroDynamicHeadingComponent,
|
|
2083
2083
|
PuroLinkTypeDirective,
|
|
2084
2084
|
AutoImageZoomWrapperDirective,
|
|
2085
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-detail margin-main\">\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back alone\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"intro_info title-container col-lg-8 offset-lg-2\">\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (category?.length || date) {\n <div class=\"puro__blog-detail--info\">\n @if (category) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'span'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.subtitle\"\n [content]=\"category\"\n ></lib-puro-dynamic-heading>\n }\n @if (date) {\n <span [class]=\"category ? 'withDot' : ''\">{{\n date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n <div\n [ngClass]=\"\n hasSidebar ? 'col-lg-8' : 'col-lg-12' + ' offset-lg-2'\n \"\n >\n <div class=\"cs_blog_details\">\n <div class=\"intro_info no-align\">\n @if (description) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"description\"\n ></div>\n }\n @if (additional1) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional1\"\n ></div>\n }\n <div class=\"cs_image_layer cs_about_img\">\n @if (img) {\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"cs--radius\"\n width=\"1130\"\n height=\"645\" loading=\"lazy\" />\n }\n </div>\n @if (additional2) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional2\"\n ></div>\n }\n @if (additional3) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional3\"\n ></div>\n }\n @if (additional4) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional4\"\n ></div>\n }\n </div>\n </div>\n <div class=\"puro__blog-detail--footer\">\n <div class=\"cs_post_share d-lg-none\">\n <ng-container\n [ngTemplateOutlet]=\"shareButtons\"\n ></ng-container>\n </div>\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n </div>\n </div>\n @if (hasSidebar) {\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\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=\"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 && categories.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[0],\n }\"\n >\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories && categories.length) {\n <ul>\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (relatedPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\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 (relatedPosts?.length) {\n <ul\n class=\"cs_recent_posts\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[1],\n }\"\n >\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n\n @if (post.date) {\n <em\n class=\"text--small\"\n >{{\n post.date\n | date\n : 'mediumDate'\n }}</em\n >\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (relatedPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (relatedPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n @if (post?.date) {\n <em class=\"text--small\">\n {{\n post?.date\n | date\n : 'dd/MM/yyyy'\n }}\n </em>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n }\n <ng-template #shareButtons>\n <div class=\"cs_social_share_btns\">\n <a\n [href]=\"facebookShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en Facebook\"\n class=\"share-facebook\"\n >\n <i class=\"icon-5\"></i>\n </a>\n <a\n [href]=\"twitterShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en X\"\n class=\"share-twitter\"\n >\n <i class=\"icon-4\"></i>\n </a>\n <a\n [href]=\"linkedinShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en LinkedIn\"\n class=\"share-linkedin\"\n >\n <i class=\"icon-2\"></i>\n </a>\n </div>\n </ng-template>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-detail{max-width:678px;margin-inline:auto;padding-block:9.1rem 4.8rem;padding-inline:5rem}@media (min-width: 1024px){.puro__blog-detail{max-width:1257px;padding-block:9.3rem 5.3rem}}@media (min-width: 1680px){.puro__blog-detail{padding-block:8.7rem 6.7rem}}.puro__blog-detail .cs_social_share_btns{display:flex;gap:3rem;align-items:center;height:100%}.puro__blog-detail .cs_social_share_btns i{color:#616160;font-size:20px}.puro__blog-detail .container-fluid .intro_info{display:flex;flex-direction:column}.puro__blog-detail .container-fluid .intro_info .cs_image_layer{margin-block:4rem}.puro__blog-detail .container-fluid .intro_info .cs_image_layer img{width:100%;aspect-ratio:1009/576;object-fit:cover}.puro__blog-detail .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-detail .row{flex-direction:row;gap:0px}}.puro__blog-detail .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-detail .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4{width:33.33%}}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-detail .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-detail .row .col-lg-4 .blog-list__items--collapsed{height:0;margin:0;overflow:hidden;transition:all .2s}.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:4.5rem;margin-bottom:4.5rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:last-child{margin-bottom:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{display:flex;justify-content:space-between}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;padding-top:2rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1.4rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{padding-top:4rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-detail .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-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-detail .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}.puro__blog-detail .row .col-lg-12{width:100%}.puro__blog-detail--info{display:flex;text-transform:uppercase;margin-bottom:4rem;opacity:.8;gap:1rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-detail--info{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}.puro__blog-detail--info .withDot:before{content:\"-\";margin-right:1rem}.puro__blog-detail--text{display:block;width:100%;text-align:left;color:#616160;opacity:.8;margin-top:0rem;margin-bottom:4rem;font-size:2rem;line-height:1.7;letter-spacing:.06rem}.puro__blog-detail--text:has(+.cs_image_layer){margin-bottom:0rem}.puro__blog-detail--back{margin-left:auto}.puro__blog-detail--back:not(:last-child){margin-bottom:4rem}.puro__blog-detail--back .btn{color:#616160;border:none;background:transparent;width:fit-content;padding:0;min-width:min-content}.puro__blog-detail--back .btn i{margin-right:2rem;font-size:12px}.puro__blog-detail--back .btn.alone{margin-bottom:4rem}.puro__blog-detail--footer{opacity:.8;display:flex;border-top:1px solid rgba(97,97,96,.2);padding-top:3.4rem;justify-content:space-between}:host ::ng-deep .puro__blog-detail--pretitle{opacity:.8;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:4rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem}:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-family:Cralika;margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}:host ::ng-deep .sidebar_item--title{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}:host ::ng-deep .puro__blog-detail--text em{font-style:italic!important}:host ::ng-deep .puro__blog-detail--text strong{font-weight:700!important}:host ::ng-deep .puro__blog-detail--text p:not(:first-child),:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{margin-top:2rem}:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{list-style:revert!important;padding-left:2em}\n"] }]
|
|
2085
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-detail margin-main\">\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back alone\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"intro_info title-container col-lg-8 offset-lg-2\">\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h2'\"\n cssClass=\"puro__blog-detail--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (category?.length || date) {\n <div class=\"puro__blog-detail--info\">\n @if (category) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'span'\"\n cssClass=\"puro__blog-detail--pretitle\"\n [color]=\"textColors?.subtitle\"\n [content]=\"category\"\n ></lib-puro-dynamic-heading>\n }\n @if (date) {\n <span [class]=\"category ? 'withDot' : ''\">{{\n date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n <div\n [ngClass]=\"\n hasSidebar ? 'col-lg-8' : 'col-lg-12' + ' offset-lg-2'\n \"\n >\n <div class=\"cs_blog_details\">\n <div class=\"intro_info no-align\">\n @if (description) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"description\"\n ></div>\n }\n @if (additional1) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional1\"\n ></div>\n }\n <div class=\"cs_image_layer cs_about_img\">\n @if (img) {\n <img\n [src]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"cs--radius\"\n width=\"1130\"\n height=\"645\" loading=\"lazy\" />\n }\n </div>\n @if (additional2) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional2\"\n ></div>\n }\n @if (additional3) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional3\"\n ></div>\n }\n @if (additional4) {\n <div\n class=\"puro__blog-detail--text\"\n [innerHTML]=\"additional4\"\n ></div>\n }\n </div>\n </div>\n <div class=\"puro__blog-detail--footer\">\n <div class=\"cs_post_share d-lg-none\">\n <ng-container\n [ngTemplateOutlet]=\"shareButtons\"\n ></ng-container>\n </div>\n @if (button) {\n <div class=\"btn__group puro__blog-detail--back\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n aria-label=\"volver\"\n >\n <i class=\"icon-101\"></i>\n <b>{{ button.label }}</b>\n </a>\n </div>\n }\n </div>\n </div>\n @if (hasSidebar) {\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\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=\"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 && categories.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[0],\n }\"\n >\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories && categories.length) {\n <ul>\n @for (cat of categories; track $index) {\n <li class=\"cat-item\">\n @if (cat) {\n <a\n [attr.aria-label]=\"\n cat.title\n \"\n [href]=\"\n button?.url +\n '?category=' +\n cat.title\n \"\n >{{ cat.title }}\n <span\n >({{ cat.posts }})</span\n ></a\n >\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (relatedPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\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 (relatedPosts?.length) {\n <ul\n class=\"cs_recent_posts\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n collapsed[1],\n }\"\n >\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n\n @if (post.date) {\n <em\n class=\"text--small\"\n >{{\n post.date\n | date\n : 'mediumDate'\n }}</em\n >\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (relatedPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"relatedPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (relatedPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of relatedPosts; track $index) {\n <li>\n @if (post) {\n <div class=\"cs_recent_post\">\n <h3\n class=\"title--smaller mb--10\"\n >\n <a\n [attr.aria-label]=\"\n post.postUrl\n ?.label\n \"\n [href]=\"\n post.postUrl\n ?.url\n \"\n [linkType]=\"\n post.postUrl\n ?.linkType\n \"\n >{{\n post?.title\n }}</a\n >\n </h3>\n @if (post?.date) {\n <em class=\"text--small\">\n {{\n post?.date\n | date\n : 'dd/MM/yyyy'\n }}\n </em>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n }\n <ng-template #shareButtons>\n <div class=\"cs_social_share_btns\">\n <a\n [href]=\"facebookShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en Facebook\"\n class=\"share-facebook\"\n >\n <i class=\"icon-5\"></i>\n </a>\n <a\n [href]=\"twitterShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en X\"\n class=\"share-twitter\"\n >\n <i class=\"icon-4\"></i>\n </a>\n <a\n [href]=\"linkedinShareUrl\"\n target=\"_blank\"\n rel=\"noopener\"\n aria-label=\"Compartir en LinkedIn\"\n class=\"share-linkedin\"\n >\n <i class=\"icon-2\"></i>\n </a>\n </div>\n </ng-template>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-detail{max-width:678px;margin-inline:auto;padding-block:9.1rem 4.8rem;padding-inline:5rem}@media (min-width: 1024px){.puro__blog-detail{max-width:1257px;padding-block:9.3rem 5.3rem}}@media (min-width: 1680px){.puro__blog-detail{padding-block:8.7rem 6.7rem}}.puro__blog-detail .cs_social_share_btns{display:flex;gap:3rem;align-items:center;height:100%}.puro__blog-detail .cs_social_share_btns i{color:#616160;font-size:20px}.puro__blog-detail .container-fluid .intro_info{display:flex;flex-direction:column}.puro__blog-detail .container-fluid .intro_info .cs_image_layer{margin-block:4rem}.puro__blog-detail .container-fluid .intro_info .cs_image_layer img{width:100%;aspect-ratio:1009/576;object-fit:cover}.puro__blog-detail .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-detail .row{flex-direction:row;gap:0px}}.puro__blog-detail .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-detail .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4{width:33.33%}}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-detail .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-detail .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-detail .row .col-lg-4 .blog-list__items--collapsed{height:0;margin:0;overflow:hidden;transition:all .2s}.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:4.5rem;margin-bottom:4.5rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:last-child{margin-bottom:2rem}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{display:flex;justify-content:space-between}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;padding-top:2rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1.4rem}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{padding-top:4rem;border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-detail .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-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .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.6rem;line-height:1.7;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1024px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1680px){.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-detail .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-detail .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-detail .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}.puro__blog-detail .row .col-lg-12{width:100%}.puro__blog-detail--info{display:flex;text-transform:uppercase;margin-bottom:4rem;opacity:.8;gap:1rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){.puro__blog-detail--info{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}.puro__blog-detail--info .withDot:before{content:\"-\";margin-right:1rem}.puro__blog-detail--text{display:block;width:100%;text-align:left;color:#616160;opacity:.8;margin-top:0rem;margin-bottom:4rem;font-size:2rem;line-height:1.7;letter-spacing:.06rem}.puro__blog-detail--text:has(+.cs_image_layer){margin-bottom:0rem}.puro__blog-detail--back{margin-left:auto}.puro__blog-detail--back:not(:last-child){margin-bottom:4rem}.puro__blog-detail--back .btn{color:var(--cl-title);border:none;background:transparent;width:fit-content;padding:0;min-width:min-content}.puro__blog-detail--back .btn i{margin-right:2rem;font-size:12px}.puro__blog-detail--back .btn.alone{margin-bottom:4rem}.puro__blog-detail--footer{opacity:.8;display:flex;border-top:1px solid rgba(97,97,96,.2);padding-top:3.4rem;justify-content:space-between}:host ::ng-deep .puro__blog-detail--pretitle{opacity:1;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:4rem;font-size:2.2rem;line-height:1.2090909091;letter-spacing:.22rem;color:#616160}:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-family:Cralika;margin-bottom:4rem;font-size:4.5rem;line-height:1.1111111111;letter-spacing:.09rem;color:var(--cl-title)}@media (min-width: 768px){:host ::ng-deep .puro__blog-detail .puro__blog-detail--title{font-size:5.4rem;line-height:1.1111111111;letter-spacing:.108rem}}:host ::ng-deep .puro__blog-detail--info{opacity:1;color:#616160}:host ::ng-deep .sidebar_item--title{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}:host ::ng-deep .puro__blog-detail--text{opacity:1}:host ::ng-deep .puro__blog-detail--text em{font-style:italic!important}:host ::ng-deep .puro__blog-detail--text strong{font-weight:700!important}:host ::ng-deep .puro__blog-detail--text p:not(:first-child),:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{margin-top:2rem}:host ::ng-deep .puro__blog-detail--text h1,:host ::ng-deep .puro__blog-detail--text h2,:host ::ng-deep .puro__blog-detail--text h3,:host ::ng-deep .puro__blog-detail--text h4,:host ::ng-deep .puro__blog-detail--text h5,:host ::ng-deep .puro__blog-detail--text h6{color:var(--cl-title)}:host ::ng-deep .puro__blog-detail--text ul,:host ::ng-deep .puro__blog-detail--text ol{list-style:revert!important;padding-left:2em}:host ::ng-deep .puro__blog-detail--text ul li::marker,:host ::ng-deep .puro__blog-detail--text ol li::marker{color:var(--cl-title)}\n"] }]
|
|
2086
2086
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
2087
2087
|
type: Inject,
|
|
2088
2088
|
args: [PLATFORM_ID]
|