ctt-puro 0.44.21 → 0.44.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/puro-blog-list/puro-blog-list.component.mjs +3 -3
- package/esm2022/lib/components/puro-carta/puro-carta.component.mjs +3 -3
- package/esm2022/lib/components/puro-info-gallery/puro-info-gallery.component.mjs +3 -3
- package/esm2022/lib/components/puro-info-services/puro-info-services.component.mjs +3 -3
- package/esm2022/lib/components/puro-schedule/puro-schedule.component.mjs +3 -3
- package/fesm2022/ctt-puro.mjs +10 -10
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -1572,7 +1572,7 @@ class PuroBlogListComponent {
|
|
|
1572
1572
|
this.filteredPosts = $event.items;
|
|
1573
1573
|
}
|
|
1574
1574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogListComponent, deps: [{ token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogListComponent, isStandalone: true, selector: "lib-puro-blog-list", inputs: { pretitle: "pretitle", title: "title", posts: "posts", tags: "tags", textColors: "textColors", categoriesTitle: "categoriesTitle", categories: "categories", latestPostsTitle: "latestPostsTitle", latestPosts: "latestPosts", searchPlaceHolder: "searchPlaceHolder", notfoundText: "notfoundText", anterior: "anterior", siguiente: "siguiente", pageSize: "pageSize" }, ngImport: i0, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <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\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1280px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:65%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:45%;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroSearchComponent, selector: "lib-puro-search", inputs: ["searchPlaceHolder", "elements", "liveSearch", "fields"], outputs: ["results"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroPaginationDirective, selector: "[libPaginate]", inputs: ["libPaginate", "libPaginateItems", "libPaginatePageSize", "libPaginateCurrentPage"], outputs: ["libPaginatePageChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogListComponent, isStandalone: true, selector: "lib-puro-blog-list", inputs: { pretitle: "pretitle", title: "title", posts: "posts", tags: "tags", textColors: "textColors", categoriesTitle: "categoriesTitle", categories: "categories", latestPostsTitle: "latestPostsTitle", latestPosts: "latestPosts", searchPlaceHolder: "searchPlaceHolder", notfoundText: "notfoundText", anterior: "anterior", siguiente: "siguiente", pageSize: "pageSize" }, ngImport: i0, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <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\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{gap:8rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1280px){.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}@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:30%!important;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroSearchComponent, selector: "lib-puro-search", inputs: ["searchPlaceHolder", "elements", "liveSearch", "fields"], outputs: ["results"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroPaginationDirective, selector: "[libPaginate]", inputs: ["libPaginate", "libPaginateItems", "libPaginatePageSize", "libPaginateCurrentPage"], outputs: ["libPaginatePageChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1576
1576
|
}
|
|
1577
1577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBlogListComponent, decorators: [{
|
|
1578
1578
|
type: Component,
|
|
@@ -1583,7 +1583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1583
1583
|
PuroDynamicHeadingComponent,
|
|
1584
1584
|
PuroPaginationDirective,
|
|
1585
1585
|
NgOptimizedImage
|
|
1586
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <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\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1280px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:65%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb{width:40%;aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .cs_post_thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:618/462}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_thumb img{aspect-ratio:inherit}}.puro__blog-list .row .col-lg-8 .pagination__controls{justify-content:center}.puro__blog-list .row .col-lg-8 .pagination__controls .btn__group{align-items:center;justify-content:center}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:45%;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"] }]
|
|
1586
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <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\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[0],\n }\"\n >\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item\">\n @if (latestPostsTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (latestPosts?.length) {\n <ul class=\"cs_recent_posts\">\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile\">\n @if (latestPostsTitle) {\n <div (click)=\"toggleCollapse(1)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.latestPostsTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.latestPostsTitle\"\n [content]=\"latestPostsTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[1],\n }\"\n ></i>\n </div>\n }\n @if (latestPosts?.length) {\n <ul\n class=\"cs_recent_posts blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed':\n !collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container,.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1280px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{gap:8rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-align:center;font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{margin-bottom:0rem;text-align:center;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:2rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1366px){.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 1279.98px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:2rem;text-align:center;font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-8 .cs_post_info .btn__group{justify-content:center}.puro__blog-list .row .col-lg-8 .cs_post_info .btn{opacity:.6}@media (min-width: 1280px){.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}@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:30%!important;padding-left:3.6rem}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;color:#616160;opacity:.4;width:max-content;display:flex}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse:before{display:inline-block;transition:transform .2s ease;transform:rotate(180deg);height:0}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed:before{transform:rotate(0);height:30px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{display:none;transition:all .2s}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{height:0}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:none}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item{display:block}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:block}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile{display:none}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile>div,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile--mobile>div{display:flex;justify-content:space-between;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile{list-style:inherit}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item a,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item a{flex-grow:1;display:flex;justify-content:space-between}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper{display:flex;width:100%;align-items:center}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul .cat-item--wrapper .remove-category,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul .cat-item--wrapper .remove-category{margin-left:.5rem;background:none;height:3rem;width:3rem;font-size:1.6rem;border-radius:50%;border:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{display:flex;border-bottom:1px solid var(--cl-text-dark);padding-bottom:1rem;padding-top:1rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li{border-bottom:1px solid var(--cl-text-dark);padding-bottom:3.4rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post{font-family:Gilroy,sans-serif;text-transform:uppercase}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-weight:700;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .title--smaller,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .title--smaller{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{color:#616160;opacity:.8;font-family:Gilroy,sans-serif;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li .cs_recent_post .text--small,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li .cs_recent_post .text--small{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:last-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:last-child{border-bottom:none}.puro__blog-list .row .col-lg-4 .cs_sidebar__item .cs_recent_posts li:before,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile .cs_recent_posts li:before{content:\"\\25b6\";font-size:8px;color:#616160;vertical-align:middle;margin-right:.5rem;margin-top:.6rem}:host ::ng-deep .puro__blog-list--pretitle{display:flex;text-align:start;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);font-family:Gilroy,sans-serif;transition:all .5s;margin-bottom:2rem}@media (min-width: 768px){:host ::ng-deep .puro__blog-list--pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{display:flex;text-align:start;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .puro__blog-list--title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .puro__blog-list--title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}:host ::ng-deep .heading .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.88rem;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){:host ::ng-deep .heading .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){:host ::ng-deep .heading .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}:host ::ng-deep .cs_sidebar_item{margin-bottom:2rem}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item{margin-bottom:3rem}}:host ::ng-deep .cs_sidebar_item--title{font-family:Gilroy,sans-serif;text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"] }]
|
|
1587
1587
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }], propDecorators: { pretitle: [{
|
|
1588
1588
|
type: Input
|
|
1589
1589
|
}], title: [{
|
|
@@ -2029,11 +2029,11 @@ class PuroCartaComponent {
|
|
|
2029
2029
|
.replace(/\s+/g, '-');
|
|
2030
2030
|
}
|
|
2031
2031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroCartaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2032
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroCartaComponent, isStandalone: true, selector: "lib-puro-carta", inputs: { title: "title", sections: "sections", tags: "tags", textColors: "textColors", showFilters: "showFilters" }, ngImport: i0, template: "@if (showFilters) {\n <lib-puro-filter\n [filters]=\"filters()\"\n (filterChange)=\"onFilterChange($event)\"\n ></lib-puro-filter>\n}\n\n<section class=\"info-card generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-card__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if ((showFilters ? visibleSections() : sections)?.length) {\n @for (section of (showFilters ? visibleSections() : sections); track $index) {\n <div\n class=\"info-card__section\"\n [attr.id]=\"getSectionId(section)\"\n >\n <div class=\"info-card__content\">\n @if (section.title) {\n <h3 class=\"info-card__sectionTitle\">{{ section.title }}</h3>\n }\n\n @if (section.items?.length) {\n <ul class=\"info-card__items\">\n @for (item of section.items; track $index) {\n <li class=\"info-card__item\">\n <p class=\"info-card__itemTitle\">\n {{ item.title || '' }}\n <span class=\"info-card__price\">\n {{ item.price || '' }}\n </span>\n </p>\n\n @if (item.icons?.length) {\n <div class=\"info-card__icons\">\n @for (icon of item.icons; track $index) {\n <i class=\"{{icon.icon}}\"></i>\n }\n </div>\n }\n\n @if (item.description) {\n <p class=\"info-card__description\">\n {{ item.description }}\n </p>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n }\n }\n</section>\n", styles: [".info-card{--container-max: 1680px;--page-gutter: clamp(20px, 6vw, 96px);--column-gap: clamp(24px, 6vw, 80px);--block-gap: clamp(32px, 6vw, 96px);--sticky-top: 8rem;display:flex;flex-direction:column;align-items:center}.info-card__section{width:
|
|
2032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroCartaComponent, isStandalone: true, selector: "lib-puro-carta", inputs: { title: "title", sections: "sections", tags: "tags", textColors: "textColors", showFilters: "showFilters" }, ngImport: i0, template: "@if (showFilters) {\n <lib-puro-filter\n [filters]=\"filters()\"\n (filterChange)=\"onFilterChange($event)\"\n ></lib-puro-filter>\n}\n\n<section class=\"info-card generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-card__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if ((showFilters ? visibleSections() : sections)?.length) {\n @for (section of (showFilters ? visibleSections() : sections); track $index) {\n <div\n class=\"info-card__section\"\n [attr.id]=\"getSectionId(section)\"\n >\n <div class=\"info-card__content\">\n @if (section.title) {\n <h3 class=\"info-card__sectionTitle\">{{ section.title }}</h3>\n }\n\n @if (section.items?.length) {\n <ul class=\"info-card__items\">\n @for (item of section.items; track $index) {\n <li class=\"info-card__item\">\n <p class=\"info-card__itemTitle\">\n {{ item.title || '' }}\n <span class=\"info-card__price\">\n {{ item.price || '' }}\n </span>\n </p>\n\n @if (item.icons?.length) {\n <div class=\"info-card__icons\">\n @for (icon of item.icons; track $index) {\n <i class=\"{{icon.icon}}\"></i>\n }\n </div>\n }\n\n @if (item.description) {\n <p class=\"info-card__description\">\n {{ item.description }}\n </p>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n }\n }\n</section>\n", styles: [".info-card{--container-max: 1680px;--page-gutter: clamp(20px, 6vw, 96px);--column-gap: clamp(24px, 6vw, 80px);--block-gap: clamp(32px, 6vw, 96px);--sticky-top: 8rem;display:flex;flex-direction:column;align-items:center}.info-card__section{width:100%;display:flex;gap:22px;padding-bottom:5.6rem;flex-direction:column-reverse;justify-content:center}@media (min-width: 400px){.info-card__section{padding-bottom:0rem}}@media (min-width: 768px){.info-card__section{flex-direction:row}}.info-card__content{width:100%}.info-card__sectionTitle{text-align:center;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}@media (min-width: 1280px){.info-card__sectionTitle{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem;text-align:start}}.info-card__items{position:relative;column-gap:11.6rem;column-rule:1px solid rgba(97,97,96,.6)}@media (min-width: 768px){.info-card__items{row-gap:44px}}@media (min-width: 1366px){.info-card__items{columns:2;row-gap:44px}}.info-card__item{break-inside:avoid;padding:1.5rem}.info-card__itemTitle{color:#1e1e1e99;opacity:.8;font-weight:500;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;margin-bottom:2rem}@media (min-width: 768px){.info-card__itemTitle{font-size:1.6rem;line-height:1.2127777778;letter-spacing:.18rem}}@media (min-width: 1680px){.info-card__itemTitle{font-size:2rem;line-height:1.213;letter-spacing:.2rem;margin-bottom:3rem}}.info-card__price{color:#ceb676}.info-card__icons{display:flex;gap:1rem;padding:10px 0}.info-card__icons i{width:23px;height:23px;font-size:23px;color:#ceb676}.info-card__description{display:inline-block;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem;max-width:93.078%;color:#1e1e1e99}@media (min-width: 768px){.info-card__description{font-size:1.4rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.info-card__description{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}:host ::ng-deep .info-card__title{text-align:center;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .info-card__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .info-card__title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "component", type: PuroFilterComponent, selector: "lib-puro-filter", inputs: ["filters"], outputs: ["filterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2033
2033
|
}
|
|
2034
2034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroCartaComponent, decorators: [{
|
|
2035
2035
|
type: Component,
|
|
2036
|
-
args: [{ selector: 'lib-puro-carta', standalone: true, imports: [CommonModule, PuroDynamicHeadingComponent, PuroFilterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showFilters) {\n <lib-puro-filter\n [filters]=\"filters()\"\n (filterChange)=\"onFilterChange($event)\"\n ></lib-puro-filter>\n}\n\n<section class=\"info-card generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-card__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if ((showFilters ? visibleSections() : sections)?.length) {\n @for (section of (showFilters ? visibleSections() : sections); track $index) {\n <div\n class=\"info-card__section\"\n [attr.id]=\"getSectionId(section)\"\n >\n <div class=\"info-card__content\">\n @if (section.title) {\n <h3 class=\"info-card__sectionTitle\">{{ section.title }}</h3>\n }\n\n @if (section.items?.length) {\n <ul class=\"info-card__items\">\n @for (item of section.items; track $index) {\n <li class=\"info-card__item\">\n <p class=\"info-card__itemTitle\">\n {{ item.title || '' }}\n <span class=\"info-card__price\">\n {{ item.price || '' }}\n </span>\n </p>\n\n @if (item.icons?.length) {\n <div class=\"info-card__icons\">\n @for (icon of item.icons; track $index) {\n <i class=\"{{icon.icon}}\"></i>\n }\n </div>\n }\n\n @if (item.description) {\n <p class=\"info-card__description\">\n {{ item.description }}\n </p>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n }\n }\n</section>\n", styles: [".info-card{--container-max: 1680px;--page-gutter: clamp(20px, 6vw, 96px);--column-gap: clamp(24px, 6vw, 80px);--block-gap: clamp(32px, 6vw, 96px);--sticky-top: 8rem;display:flex;flex-direction:column;align-items:center}.info-card__section{width:
|
|
2036
|
+
args: [{ selector: 'lib-puro-carta', standalone: true, imports: [CommonModule, PuroDynamicHeadingComponent, PuroFilterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showFilters) {\n <lib-puro-filter\n [filters]=\"filters()\"\n (filterChange)=\"onFilterChange($event)\"\n ></lib-puro-filter>\n}\n\n<section class=\"info-card generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-card__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if ((showFilters ? visibleSections() : sections)?.length) {\n @for (section of (showFilters ? visibleSections() : sections); track $index) {\n <div\n class=\"info-card__section\"\n [attr.id]=\"getSectionId(section)\"\n >\n <div class=\"info-card__content\">\n @if (section.title) {\n <h3 class=\"info-card__sectionTitle\">{{ section.title }}</h3>\n }\n\n @if (section.items?.length) {\n <ul class=\"info-card__items\">\n @for (item of section.items; track $index) {\n <li class=\"info-card__item\">\n <p class=\"info-card__itemTitle\">\n {{ item.title || '' }}\n <span class=\"info-card__price\">\n {{ item.price || '' }}\n </span>\n </p>\n\n @if (item.icons?.length) {\n <div class=\"info-card__icons\">\n @for (icon of item.icons; track $index) {\n <i class=\"{{icon.icon}}\"></i>\n }\n </div>\n }\n\n @if (item.description) {\n <p class=\"info-card__description\">\n {{ item.description }}\n </p>\n }\n </li>\n }\n </ul>\n }\n </div>\n </div>\n }\n }\n</section>\n", styles: [".info-card{--container-max: 1680px;--page-gutter: clamp(20px, 6vw, 96px);--column-gap: clamp(24px, 6vw, 80px);--block-gap: clamp(32px, 6vw, 96px);--sticky-top: 8rem;display:flex;flex-direction:column;align-items:center}.info-card__section{width:100%;display:flex;gap:22px;padding-bottom:5.6rem;flex-direction:column-reverse;justify-content:center}@media (min-width: 400px){.info-card__section{padding-bottom:0rem}}@media (min-width: 768px){.info-card__section{flex-direction:row}}.info-card__content{width:100%}.info-card__sectionTitle{text-align:center;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem;font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}@media (min-width: 1280px){.info-card__sectionTitle{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem;text-align:start}}.info-card__items{position:relative;column-gap:11.6rem;column-rule:1px solid rgba(97,97,96,.6)}@media (min-width: 768px){.info-card__items{row-gap:44px}}@media (min-width: 1366px){.info-card__items{columns:2;row-gap:44px}}.info-card__item{break-inside:avoid;padding:1.5rem}.info-card__itemTitle{color:#1e1e1e99;opacity:.8;font-weight:500;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;margin-bottom:2rem}@media (min-width: 768px){.info-card__itemTitle{font-size:1.6rem;line-height:1.2127777778;letter-spacing:.18rem}}@media (min-width: 1680px){.info-card__itemTitle{font-size:2rem;line-height:1.213;letter-spacing:.2rem;margin-bottom:3rem}}.info-card__price{color:#ceb676}.info-card__icons{display:flex;gap:1rem;padding:10px 0}.info-card__icons i{width:23px;height:23px;font-size:23px;color:#ceb676}.info-card__description{display:inline-block;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem;max-width:93.078%;color:#1e1e1e99}@media (min-width: 768px){.info-card__description{font-size:1.4rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.info-card__description{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem}}:host ::ng-deep .info-card__title{text-align:center;font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){:host ::ng-deep .info-card__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){:host ::ng-deep .info-card__title{font-size:4.5rem;line-height:1.5466666667;letter-spacing:.09rem;margin-bottom:3rem}}\n"] }]
|
|
2037
2037
|
}], propDecorators: { title: [{
|
|
2038
2038
|
type: Input
|
|
2039
2039
|
}], sections: [{
|
|
@@ -7045,7 +7045,7 @@ class PuroInfoGalleryComponent {
|
|
|
7045
7045
|
}
|
|
7046
7046
|
}
|
|
7047
7047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoGalleryComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoGalleryComponent, isStandalone: true, selector: "lib-puro-info-gallery", inputs: { title: "title", description: "description", moreinfo: "moreinfo", buttons: "buttons", images: "images", advantages: "advantages", tags: "tags", textColors: "textColors" }, viewQueries: [{ propertyName: "moreContent", first: true, predicate: ["moreContent"], descendants: true }], ngImport: i0, template: "<section class=\"suites generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"suites__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div\n class=\"js-active-slider suites__slider relative\"\n [puroSlider]=\"advantages\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suites-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"3\"\n data-slides_mobile=\"3\"\n data-slides_mobile_small=\"3\"\n data-slides_mobile_xsmall=\"2\"\n >\n @if (advantages?.length) {\n <div class=\"js-suites-slider\">\n @for (adv of advantages; track $index) {\n <div>\n <div class=\"suites__service\">\n @if (adv.icon) {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"adv.icon\"\n ></svg>\n }\n @if (adv.title) {\n <span>{{ adv.title }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__paragraph\">\n @if (description) {\n <p>{{ description }}</p>\n }\n @if (moreinfo) {\n <p #moreContent class=\"more-content\" [class.active]=\"showMoreInfo\">\n {{ moreinfo }}\n </p>\n }\n </div>\n @if (buttons?.length) {\n <div class=\"btn__group\">\n @for (btn of buttons; track $index) {\n @if (!btn.url) {\n @if (btn.label && moreinfo) {\n <button\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n class=\"btn\"\n (click)=\"toggleMoreInfo()\"\n [attr.aria-label]=\"btn.label\"\n >\n <span class=\"btn__moreLess--more\"\n >{{ btn.label }} +</span\n >\n <span class=\"btn__moreLess--less\"\n >{{ btn.label }} -</span\n >\n </button>\n }\n } @else {\n @if (btn.label) {\n <a\n [href]=\"btn.url\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n [attr.aria-label]=\"btn.label\"\n ><span>{{ btn.label }}</span></a\n >\n }\n }\n }\n </div>\n }\n @if (images?.length) {\n <div\n class=\"suites__gallery relative js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suitesGallery-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"4\"\n >\n <div class=\"suitesGallery__grid\">\n <div class=\"suitesGallery__big js-content-slider\">\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"371\"\n height=\"351\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n <div\n class=\"suitesGallery__small js-suitesGallery-slider mobile\"\n >\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"256\"\n height=\"242\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n</section>\n", styles: ["section .more-content{display:none}section .btn__moreLess{position:relative}section .btn__moreLess--more,section .btn__moreLess--less{position:absolute;transition:opacity .5s;left:50%;top:50%;transform:translate(-50%,-50%)}section .btn__moreLess--more{opacity:1}section .btn__moreLess--less{opacity:0}section.moreLess--active .btn__moreLess--more{opacity:0}section.moreLess--active .btn__moreLess--less{opacity:1}.suites__heading{color:var(--cl-title)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoGalleryComponent, isStandalone: true, selector: "lib-puro-info-gallery", inputs: { title: "title", description: "description", moreinfo: "moreinfo", buttons: "buttons", images: "images", advantages: "advantages", tags: "tags", textColors: "textColors" }, viewQueries: [{ propertyName: "moreContent", first: true, predicate: ["moreContent"], descendants: true }], ngImport: i0, template: "<section class=\"suites generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"suites__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div\n class=\"js-active-slider suites__slider relative\"\n [puroSlider]=\"advantages\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suites-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"3\"\n data-slides_mobile=\"3\"\n data-slides_mobile_small=\"3\"\n data-slides_mobile_xsmall=\"2\"\n >\n @if (advantages?.length) {\n <div class=\"js-suites-slider\">\n @for (adv of advantages; track $index) {\n <div>\n <div class=\"suites__service\">\n @if (adv.icon) {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"adv.icon\"\n ></svg>\n }\n @if (adv.title) {\n <span>{{ adv.title }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__paragraph\">\n @if (description) {\n <p>{{ description }}</p>\n }\n @if (moreinfo) {\n <p #moreContent class=\"more-content\" [class.active]=\"showMoreInfo\">\n {{ moreinfo }}\n </p>\n }\n </div>\n @if (buttons?.length) {\n <div class=\"btn__group\">\n @for (btn of buttons; track $index) {\n @if (!btn.url) {\n @if (btn.label && moreinfo) {\n <button\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n class=\"btn\"\n (click)=\"toggleMoreInfo()\"\n [attr.aria-label]=\"btn.label\"\n >\n <span class=\"btn__moreLess--more\"\n >{{ btn.label }} +</span\n >\n <span class=\"btn__moreLess--less\"\n >{{ btn.label }} -</span\n >\n </button>\n }\n } @else {\n @if (btn.label) {\n <a\n [href]=\"btn.url\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n [attr.aria-label]=\"btn.label\"\n ><span>{{ btn.label }}</span></a\n >\n }\n }\n }\n </div>\n }\n @if (images?.length) {\n <div\n class=\"suites__gallery relative js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suitesGallery-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"4\"\n data-slides_laptop=\"4\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"suitesGallery__grid\">\n <div class=\"suitesGallery__big js-content-slider\">\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"371\"\n height=\"351\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n <div\n class=\"suitesGallery__small js-suitesGallery-slider mobile\"\n >\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"256\"\n height=\"242\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n</section>\n", styles: ["section .more-content{display:none}section .btn__moreLess{position:relative}section .btn__moreLess--more,section .btn__moreLess--less{position:absolute;transition:opacity .5s;left:50%;top:50%;transform:translate(-50%,-50%)}section .btn__moreLess--more{opacity:1}section .btn__moreLess--less{opacity:0}section.moreLess--active .btn__moreLess--more{opacity:0}section.moreLess--active .btn__moreLess--less{opacity:1}.suites__heading{color:var(--cl-title)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7049
7049
|
}
|
|
7050
7050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoGalleryComponent, decorators: [{
|
|
7051
7051
|
type: Component,
|
|
@@ -7054,7 +7054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7054
7054
|
PuroSliderDirective,
|
|
7055
7055
|
NgOptimizedImage,
|
|
7056
7056
|
PuroDynamicHeadingComponent,
|
|
7057
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"suites__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div\n class=\"js-active-slider suites__slider relative\"\n [puroSlider]=\"advantages\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suites-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"3\"\n data-slides_mobile=\"3\"\n data-slides_mobile_small=\"3\"\n data-slides_mobile_xsmall=\"2\"\n >\n @if (advantages?.length) {\n <div class=\"js-suites-slider\">\n @for (adv of advantages; track $index) {\n <div>\n <div class=\"suites__service\">\n @if (adv.icon) {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"adv.icon\"\n ></svg>\n }\n @if (adv.title) {\n <span>{{ adv.title }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__paragraph\">\n @if (description) {\n <p>{{ description }}</p>\n }\n @if (moreinfo) {\n <p #moreContent class=\"more-content\" [class.active]=\"showMoreInfo\">\n {{ moreinfo }}\n </p>\n }\n </div>\n @if (buttons?.length) {\n <div class=\"btn__group\">\n @for (btn of buttons; track $index) {\n @if (!btn.url) {\n @if (btn.label && moreinfo) {\n <button\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n class=\"btn\"\n (click)=\"toggleMoreInfo()\"\n [attr.aria-label]=\"btn.label\"\n >\n <span class=\"btn__moreLess--more\"\n >{{ btn.label }} +</span\n >\n <span class=\"btn__moreLess--less\"\n >{{ btn.label }} -</span\n >\n </button>\n }\n } @else {\n @if (btn.label) {\n <a\n [href]=\"btn.url\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n [attr.aria-label]=\"btn.label\"\n ><span>{{ btn.label }}</span></a\n >\n }\n }\n }\n </div>\n }\n @if (images?.length) {\n <div\n class=\"suites__gallery relative js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suitesGallery-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"4\"\n >\n <div class=\"suitesGallery__grid\">\n <div class=\"suitesGallery__big js-content-slider\">\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"371\"\n height=\"351\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n <div\n class=\"suitesGallery__small js-suitesGallery-slider mobile\"\n >\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"256\"\n height=\"242\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n</section>\n", styles: ["section .more-content{display:none}section .btn__moreLess{position:relative}section .btn__moreLess--more,section .btn__moreLess--less{position:absolute;transition:opacity .5s;left:50%;top:50%;transform:translate(-50%,-50%)}section .btn__moreLess--more{opacity:1}section .btn__moreLess--less{opacity:0}section.moreLess--active .btn__moreLess--more{opacity:0}section.moreLess--active .btn__moreLess--less{opacity:1}.suites__heading{color:var(--cl-title)}\n"] }]
|
|
7057
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"suites__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div\n class=\"js-active-slider suites__slider relative\"\n [puroSlider]=\"advantages\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suites-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"3\"\n data-slides_mobile=\"3\"\n data-slides_mobile_small=\"3\"\n data-slides_mobile_xsmall=\"2\"\n >\n @if (advantages?.length) {\n <div class=\"js-suites-slider\">\n @for (adv of advantages; track $index) {\n <div>\n <div class=\"suites__service\">\n @if (adv.icon) {\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"adv.icon\"\n ></svg>\n }\n @if (adv.title) {\n <span>{{ adv.title }}</span>\n }\n </div>\n </div>\n }\n </div>\n }\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__paragraph\">\n @if (description) {\n <p>{{ description }}</p>\n }\n @if (moreinfo) {\n <p #moreContent class=\"more-content\" [class.active]=\"showMoreInfo\">\n {{ moreinfo }}\n </p>\n }\n </div>\n @if (buttons?.length) {\n <div class=\"btn__group\">\n @for (btn of buttons; track $index) {\n @if (!btn.url) {\n @if (btn.label && moreinfo) {\n <button\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n class=\"btn\"\n (click)=\"toggleMoreInfo()\"\n [attr.aria-label]=\"btn.label\"\n >\n <span class=\"btn__moreLess--more\"\n >{{ btn.label }} +</span\n >\n <span class=\"btn__moreLess--less\"\n >{{ btn.label }} -</span\n >\n </button>\n }\n } @else {\n @if (btn.label) {\n <a\n [href]=\"btn.url\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline btn__moreLess':\n $index === 1,\n }\"\n [attr.aria-label]=\"btn.label\"\n ><span>{{ btn.label }}</span></a\n >\n }\n }\n }\n </div>\n }\n @if (images?.length) {\n <div\n class=\"suites__gallery relative js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-suitesGallery-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"4\"\n data-slides_laptop=\"4\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"suitesGallery__grid\">\n <div class=\"suitesGallery__big js-content-slider\">\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"371\"\n height=\"351\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n <div\n class=\"suitesGallery__small js-suitesGallery-slider mobile\"\n >\n @for (img of images; track $index) {\n <div>\n <div class=\"suitesGallery__graphic\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n class=\"suitesGallery__graphic--img\"\n width=\"256\"\n height=\"242\"\n decoding=\"async\"\n />\n </div>\n </div>\n }\n </div>\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n</section>\n", styles: ["section .more-content{display:none}section .btn__moreLess{position:relative}section .btn__moreLess--more,section .btn__moreLess--less{position:absolute;transition:opacity .5s;left:50%;top:50%;transform:translate(-50%,-50%)}section .btn__moreLess--more{opacity:1}section .btn__moreLess--less{opacity:0}section.moreLess--active .btn__moreLess--more{opacity:0}section.moreLess--active .btn__moreLess--less{opacity:1}.suites__heading{color:var(--cl-title)}\n"] }]
|
|
7058
7058
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { title: [{
|
|
7059
7059
|
type: Input
|
|
7060
7060
|
}], description: [{
|
|
@@ -7148,11 +7148,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7148
7148
|
|
|
7149
7149
|
class PuroInfoServicesComponent {
|
|
7150
7150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoServicesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoServicesComponent, isStandalone: true, selector: "lib-puro-info-services", inputs: { title: "title", images: "images", button: "button", items: "items", view: "view" }, ngImport: i0, template: "<section\n class=\"equipments js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-photo-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"equipments__inner\">\n <ng-container *ngIf=\"view === 'right'; else leftSideTpl\">\n <ng-container [ngTemplateOutlet]=\"rightSideTpl\"></ng-container>\n </ng-container>\n\n <ng-template #leftSideTpl>\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #equipmentsContentTpl>\n @if (title) {\n <span class=\"equipments__title\">{{ title }}</span>\n }\n @if (items && items.length) {\n <div class=\"equipments__list\">\n @for (item of items; track $index) {\n <div class=\"equipments__listItem\">\n @if (item.title) {\n <
|
|
7151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoServicesComponent, isStandalone: true, selector: "lib-puro-info-services", inputs: { title: "title", images: "images", button: "button", items: "items", view: "view" }, ngImport: i0, template: "<section\n class=\"equipments js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-photo-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"equipments__inner\">\n <ng-container *ngIf=\"view === 'right'; else leftSideTpl\">\n <ng-container [ngTemplateOutlet]=\"rightSideTpl\"></ng-container>\n </ng-container>\n\n <ng-template #leftSideTpl>\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #equipmentsContentTpl>\n @if (title) {\n <span class=\"equipments__title\">{{ title }}</span>\n }\n @if (items && items.length) {\n <div class=\"equipments__list\">\n @for (item of items; track $index) {\n <div class=\"equipments__listItem\">\n @if (item.title) {\n <span class=\"equipments__listItem__subHeading\">\n {{ item.title }}\n </span>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem__paragraph\">\n {{ item.subtitle }}\n </p>\n }\n @if (item.icon) {\n <span class=\"equipments__listItem--icon\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"28\"\n height=\"37\"\n [ngClass]=\"item.icon\"\n ></svg>\n </span>\n }\n </div>\n }\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline btn__moreLess\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n </ng-template>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7152
7152
|
}
|
|
7153
7153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoServicesComponent, decorators: [{
|
|
7154
7154
|
type: Component,
|
|
7155
|
-
args: [{ selector: 'lib-puro-info-services', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"equipments js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-photo-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"equipments__inner\">\n <ng-container *ngIf=\"view === 'right'; else leftSideTpl\">\n <ng-container [ngTemplateOutlet]=\"rightSideTpl\"></ng-container>\n </ng-container>\n\n <ng-template #leftSideTpl>\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #equipmentsContentTpl>\n @if (title) {\n <span class=\"equipments__title\">{{ title }}</span>\n }\n @if (items && items.length) {\n <div class=\"equipments__list\">\n @for (item of items; track $index) {\n <div class=\"equipments__listItem\">\n @if (item.title) {\n <
|
|
7155
|
+
args: [{ selector: 'lib-puro-info-services', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"equipments js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-photo-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"equipments__inner\">\n <ng-container *ngIf=\"view === 'right'; else leftSideTpl\">\n <ng-container [ngTemplateOutlet]=\"rightSideTpl\"></ng-container>\n </ng-container>\n\n <ng-template #leftSideTpl>\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"equipments__content\">\n <ng-container\n [ngTemplateOutlet]=\"equipmentsContentTpl\"\n ></ng-container>\n </div>\n\n <div class=\"equipments__imageSlider\">\n <div class=\"equipments__imageSlider--inner relative\">\n <div class=\"js-photo-slider equipments__slider\">\n @if (images && images.length) {\n @for (img of images; track $index) {\n <div class=\"equipments__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n loading=\"lazy\"\n class=\"equipments__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #equipmentsContentTpl>\n @if (title) {\n <span class=\"equipments__title\">{{ title }}</span>\n }\n @if (items && items.length) {\n <div class=\"equipments__list\">\n @for (item of items; track $index) {\n <div class=\"equipments__listItem\">\n @if (item.title) {\n <span class=\"equipments__listItem__subHeading\">\n {{ item.title }}\n </span>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem__paragraph\">\n {{ item.subtitle }}\n </p>\n }\n @if (item.icon) {\n <span class=\"equipments__listItem--icon\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"28\"\n height=\"37\"\n [ngClass]=\"item.icon\"\n ></svg>\n </span>\n }\n </div>\n }\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline btn__moreLess\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n </ng-template>\n </div>\n</section>\n" }]
|
|
7156
7156
|
}], propDecorators: { title: [{
|
|
7157
7157
|
type: Input
|
|
7158
7158
|
}], images: [{
|
|
@@ -7907,11 +7907,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7907
7907
|
|
|
7908
7908
|
class PuroScheduleComponent {
|
|
7909
7909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroScheduleComponent, isStandalone: true, selector: "lib-puro-schedule", inputs: { items: "items", title: "title" }, ngImport: i0, template: "<section class=\"schedule generalMargin\">\n @if (title) {\n <span class=\"schedule__title\">{{ title }}</span>\n }\n <div class=\"schedule__list\">\n @for (item of items || []; track $index) {\n <div class=\"schedule__box\">\n @if (item.title) {\n <p class=\"schedule__name\">{{ item.title }}</p>\n }\n @if (item.icon) {\n <span><i class=\"{{ item.icon }}\"></i></span>\n }\n @if (item.description) {\n <p class=\"schedule__time\">\n <span [innerHTML]=\"item.description\"></span>\n </p>\n }\n </div>\n }\n </div>\n</section>\n", styles: ["i{width:36px;height:36px;background:#616160;-webkit-mask-size:36px;mask-size:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7910
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroScheduleComponent, isStandalone: true, selector: "lib-puro-schedule", inputs: { items: "items", title: "title" }, ngImport: i0, template: "<section class=\"schedule generalMargin\">\n @if (title) {\n <span class=\"schedule__title\">{{ title }}</span>\n }\n <div class=\"schedule__list\">\n @for (item of items || []; track $index) {\n <div class=\"schedule__box\">\n @if (item.title) {\n <p class=\"schedule__name\">{{ item.title }}</p>\n }\n @if (item.icon) {\n <span><i class=\"{{ item.icon }}\"></i></span>\n }\n @if (item.description) {\n <p class=\"schedule__time\">\n <span [innerHTML]=\"item.description\"class=\"schedule__paragraph\"></span>\n </p>\n }\n </div>\n }\n </div>\n</section>\n", styles: ["i{width:36px;height:36px;background:#616160;-webkit-mask-size:36px;mask-size:36px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7911
7911
|
}
|
|
7912
7912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroScheduleComponent, decorators: [{
|
|
7913
7913
|
type: Component,
|
|
7914
|
-
args: [{ selector: 'lib-puro-schedule', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"schedule generalMargin\">\n @if (title) {\n <span class=\"schedule__title\">{{ title }}</span>\n }\n <div class=\"schedule__list\">\n @for (item of items || []; track $index) {\n <div class=\"schedule__box\">\n @if (item.title) {\n <p class=\"schedule__name\">{{ item.title }}</p>\n }\n @if (item.icon) {\n <span><i class=\"{{ item.icon }}\"></i></span>\n }\n @if (item.description) {\n <p class=\"schedule__time\">\n <span [innerHTML]=\"item.description\"></span>\n </p>\n }\n </div>\n }\n </div>\n</section>\n", styles: ["i{width:36px;height:36px;background:#616160;-webkit-mask-size:36px;mask-size:36px}\n"] }]
|
|
7914
|
+
args: [{ selector: 'lib-puro-schedule', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"schedule generalMargin\">\n @if (title) {\n <span class=\"schedule__title\">{{ title }}</span>\n }\n <div class=\"schedule__list\">\n @for (item of items || []; track $index) {\n <div class=\"schedule__box\">\n @if (item.title) {\n <p class=\"schedule__name\">{{ item.title }}</p>\n }\n @if (item.icon) {\n <span><i class=\"{{ item.icon }}\"></i></span>\n }\n @if (item.description) {\n <p class=\"schedule__time\">\n <span [innerHTML]=\"item.description\"class=\"schedule__paragraph\"></span>\n </p>\n }\n </div>\n }\n </div>\n</section>\n", styles: ["i{width:36px;height:36px;background:#616160;-webkit-mask-size:36px;mask-size:36px}\n"] }]
|
|
7915
7915
|
}], propDecorators: { items: [{
|
|
7916
7916
|
type: Input
|
|
7917
7917
|
}], title: [{
|