ctt-puro 0.44.6 → 0.44.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/puro-advantages-small/puro-advantages-small.component.mjs +3 -3
- package/esm2022/lib/components/puro-banner4col/puro-banner4col.component.mjs +3 -3
- 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-contact-form/puro-contact-form.component.mjs +3 -3
- package/esm2022/lib/components/puro-engine-modal/puro-engine-modal.component.mjs +3 -3
- package/esm2022/lib/components/puro-engine-modal/puro-engine-modal.interface.mjs +1 -1
- package/esm2022/lib/components/puro-events-form/puro-events-form.component.mjs +3 -3
- package/esm2022/lib/components/puro-faqs-img/puro-faqs-img.component.mjs +3 -3
- package/esm2022/lib/components/puro-gallery/puro-gallery.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid3col-filter/puro-grid3col-filter.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid3col-slider/puro-grid3col-slider.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid4items/puro-grid4items.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid5items/puro-grid5items.component.mjs +3 -3
- package/esm2022/lib/components/puro-grid6items/puro-grid6items.component.mjs +3 -3
- package/esm2022/lib/components/puro-info-banner/puro-info-banner.component.mjs +3 -3
- package/esm2022/lib/components/puro-info-services/puro-info-services.component.mjs +3 -3
- package/esm2022/lib/components/puro-list-general/puro-list-general.component.mjs +3 -3
- package/esm2022/lib/components/puro-list-restaurants/puro-list-restaurants.component.mjs +3 -3
- package/esm2022/lib/components/puro-map-list/puro-map-list.component.mjs +3 -3
- package/esm2022/lib/components/puro-schedule/puro-schedule.component.mjs +3 -3
- package/esm2022/lib/components/puro-slider2col/puro-slider2col.component.mjs +3 -3
- package/esm2022/lib/components/puro-zigzag2col/puro-zigzag2col.component.mjs +3 -3
- package/esm2022/lib/services/mapper/mapper.service.mjs +10 -7
- package/esm2022/lib/shared/puro-filter/puro-filter.component.mjs +3 -3
- package/fesm2022/ctt-puro.mjs +55 -52
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/lib/components/puro-engine-modal/puro-engine-modal.interface.d.ts +2 -2
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -1354,11 +1354,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1354
1354
|
|
|
1355
1355
|
class PuroAdvantagesSmallComponent {
|
|
1356
1356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroAdvantagesSmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroAdvantagesSmallComponent, isStandalone: true, selector: "lib-puro-advantages-small", inputs: { items: "items" }, ngImport: i0, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"
|
|
1357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroAdvantagesSmallComponent, isStandalone: true, selector: "lib-puro-advantages-small", inputs: { items: "items" }, ngImport: i0, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}.advantages__icon i{width:47px;height:47px;background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text,.advantages__item .advantages__heading{color:var(--white)}:host ::ng-deep .slick-btn{color:var(--white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1358
1358
|
}
|
|
1359
1359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroAdvantagesSmallComponent, decorators: [{
|
|
1360
1360
|
type: Component,
|
|
1361
|
-
args: [{ selector: 'lib-puro-advantages-small', standalone: true, imports: [CommonModule, PuroSliderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"
|
|
1361
|
+
args: [{ selector: 'lib-puro-advantages-small', standalone: true, imports: [CommonModule, PuroSliderDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"advantages js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-advantages-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"advantages__inner relative\">\n <div class=\"advantages__container\">\n <div class=\"js-advantages-slider advantages__slider\">\n @for (item of items || []; track $index) {\n <div>\n @if (item) {\n <div class=\"advantages__item\">\n @if (item.title) {\n <div class=\"advantages__text\">\n {{ item.title }}\n </div>\n }\n @if (item.icon) {\n <div class=\"advantages__icon\">\n <i class=\"{{ item.icon }}\"></i>\n </div>\n }\n @if (item.description) {\n <span class=\"advantages__text\">{{\n item.description\n }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n</section>\n", styles: ["section{background-color:var(--primary)}.advantages__icon i{width:47px;height:47px;background-color:var(--white);border-radius:50%}.advantages__item .advantages__icon{background-color:#fff3}.advantages__item .advantages__text,.advantages__item .advantages__heading{color:var(--white)}:host ::ng-deep .slick-btn{color:var(--white)!important}\n"] }]
|
|
1362
1362
|
}], propDecorators: { items: [{
|
|
1363
1363
|
type: Input
|
|
1364
1364
|
}] } });
|
|
@@ -1430,7 +1430,7 @@ class PuroBannerSliderItem {
|
|
|
1430
1430
|
|
|
1431
1431
|
class PuroBanner4colComponent {
|
|
1432
1432
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBanner4colComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBanner4colComponent, isStandalone: true, selector: "lib-puro-banner4col", inputs: { title: "title", description: "description", button: "button", images: "images", bigtitle: "bigtitle", bigbanner: "bigbanner", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "@if (bigbanner && images?.length){\n <section\n class=\"introduction js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-introduction-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=\"3\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"largeImage largeImage__blockSpacing--small\">\n @if (bigtitle) {\n <span class=\"largeImage__title largeImage__title--large\">{{\n bigtitle\n }}</span>\n }\n @if (bigbanner) {\n <div class=\"largeImage__inner\">\n <div class=\"largeImage__box\">\n <div class=\"largeImage__graphic\">\n <img\n [ngSrc]=\"bigbanner.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"bigbanner.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"introduction__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"introduction__paragraph\">\n <p>{{ description }}</p>\n </div>\n }\n @if (images?.length) {\n <div class=\"introduction__inner relative\">\n <div\n class=\"js-introduction-slider introduction__slider js-slider_fix-arrows\"\n >\n @for (img of images; track $index) {\n <div>\n <div\n class=\"introduction__box js-slider_fix-arrows-zone\"\n >\n <div class=\"introduction__graphic\">\n <img\n [ngSrc]=\"img.src\"\n width=\"300\"\n height=\"578\"\n class=\"introduction__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </section>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
1433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBanner4colComponent, isStandalone: true, selector: "lib-puro-banner4col", inputs: { title: "title", description: "description", button: "button", images: "images", bigtitle: "bigtitle", bigbanner: "bigbanner", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "@if (bigbanner && images?.length){\n <section\n class=\"introduction js-active-slider generalMargin\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-introduction-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=\"3\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"largeImage largeImage__blockSpacing--small\">\n @if (bigtitle) {\n <span class=\"largeImage__title largeImage__title--large\">{{\n bigtitle\n }}</span>\n }\n @if (bigbanner) {\n <div class=\"largeImage__inner\">\n <div class=\"largeImage__box\">\n <div class=\"largeImage__graphic\">\n <img\n [ngSrc]=\"bigbanner.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"bigbanner.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"introduction__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"introduction__paragraph\">\n <p>{{ description }}</p>\n </div>\n }\n @if (images?.length) {\n <div class=\"introduction__inner relative\">\n <div\n class=\"js-introduction-slider introduction__slider js-slider_fix-arrows\"\n >\n @for (img of images; track $index) {\n <div>\n <div\n class=\"introduction__box js-slider_fix-arrows-zone\"\n >\n <div class=\"introduction__graphic\">\n <img\n [ngSrc]=\"img.src\"\n width=\"300\"\n height=\"578\"\n class=\"introduction__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </section>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
1434
1434
|
}
|
|
1435
1435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBanner4colComponent, decorators: [{
|
|
1436
1436
|
type: Component,
|
|
@@ -1439,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1439
1439
|
PuroLinkTypeDirective,
|
|
1440
1440
|
PuroDynamicHeadingComponent,
|
|
1441
1441
|
NgOptimizedImage
|
|
1442
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bigbanner && images?.length){\n <section\n class=\"introduction js-active-slider\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-introduction-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=\"3\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"largeImage largeImage__blockSpacing--small\">\n @if (bigtitle) {\n <span class=\"largeImage__title largeImage__title--large\">{{\n bigtitle\n }}</span>\n }\n @if (bigbanner) {\n <div class=\"largeImage__inner\">\n <div class=\"largeImage__box\">\n <div class=\"largeImage__graphic\">\n <img\n [ngSrc]=\"bigbanner.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"bigbanner.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"introduction__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"introduction__paragraph\">\n <p>{{ description }}</p>\n </div>\n }\n @if (images?.length) {\n <div class=\"introduction__inner relative\">\n <div\n class=\"js-introduction-slider introduction__slider js-slider_fix-arrows\"\n >\n @for (img of images; track $index) {\n <div>\n <div\n class=\"introduction__box js-slider_fix-arrows-zone\"\n >\n <div class=\"introduction__graphic\">\n <img\n [ngSrc]=\"img.src\"\n width=\"300\"\n height=\"578\"\n class=\"introduction__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </section>\n}\n" }]
|
|
1442
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (bigbanner && images?.length){\n <section\n class=\"introduction js-active-slider generalMargin\"\n [puroSlider]=\"images\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-introduction-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=\"3\"\n data-slides_mobile=\"2\"\n data-slides_mobile_small=\"2\"\n data-slides_mobile_xsmall=\"2\"\n >\n <div class=\"largeImage largeImage__blockSpacing--small\">\n @if (bigtitle) {\n <span class=\"largeImage__title largeImage__title--large\">{{\n bigtitle\n }}</span>\n }\n @if (bigbanner) {\n <div class=\"largeImage__inner\">\n <div class=\"largeImage__box\">\n <div class=\"largeImage__graphic\">\n <img\n [ngSrc]=\"bigbanner.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"bigbanner.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"introduction__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"introduction__paragraph\">\n <p>{{ description }}</p>\n </div>\n }\n @if (images?.length) {\n <div class=\"introduction__inner relative\">\n <div\n class=\"js-introduction-slider introduction__slider js-slider_fix-arrows\"\n >\n @for (img of images; track $index) {\n <div>\n <div\n class=\"introduction__box js-slider_fix-arrows-zone\"\n >\n <div class=\"introduction__graphic\">\n <img\n [ngSrc]=\"img.src\"\n width=\"300\"\n height=\"578\"\n class=\"introduction__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </section>\n}\n" }]
|
|
1443
1443
|
}], propDecorators: { title: [{
|
|
1444
1444
|
type: Input
|
|
1445
1445
|
}], description: [{
|
|
@@ -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\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed': 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': collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list{max-width:1700px;margin-inline:auto;padding-inline:4rem;padding-block:8.9rem 3.949rem}@media (min-width: 768px){.puro__blog-list{padding-inline:5rem}}@media (min-width: 1024px){.puro__blog-list{padding-block:6.5rem 4.8rem}}@media (min-width: 1680px){.puro__blog-list{padding-inline:14rem;padding-block:10.4rem 10.407rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.5rem;text-align:center;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:Gilroy,sans-serif;text-transform:uppercase;text-align:center;margin-bottom:1.5rem;font-weight:700;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:4.2rem 2.8rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{text-align:center;margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{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{width:70%!important;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-8 .pagination__controls .btn__group .btn__primary--outline{width:30%!important}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{margin:0;overflow:hidden;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{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.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:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.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.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.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:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.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:1.4rem}@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{opacity:.8;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:2rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.8195;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{font-family:Cralika;margin-bottom:2rem;font-size:2.4rem;line-height:1.52875;letter-spacing:.048rem}@media (min-width: 1280px){:host ::ng-deep .puro__blog-list--title{font-size:5rem;line-height:1.392;letter-spacing:.1rem}}: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{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroSearchComponent, selector: "lib-puro-search", inputs: ["searchPlaceHolder", "elements", "liveSearch", "fields"], outputs: ["results"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroPaginationDirective, selector: "[libPaginate]", inputs: ["libPaginate", "libPaginateItems", "libPaginatePageSize", "libPaginateCurrentPage"], outputs: ["libPaginatePageChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBlogListComponent, isStandalone: true, selector: "lib-puro-blog-list", inputs: { pretitle: "pretitle", title: "title", posts: "posts", tags: "tags", textColors: "textColors", categoriesTitle: "categoriesTitle", categories: "categories", latestPostsTitle: "latestPostsTitle", latestPosts: "latestPosts", searchPlaceHolder: "searchPlaceHolder", notfoundText: "notfoundText", anterior: "anterior", siguiente: "siguiente", pageSize: "pageSize" }, ngImport: i0, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed': 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': collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:4.2rem 2.8rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{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{width:70%!important;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-8 .pagination__controls .btn__group .btn__primary--outline{width:30%!important}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{margin:0;overflow:hidden;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{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.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:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.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:1.4rem}@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\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed': 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': collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list{max-width:1700px;margin-inline:auto;padding-inline:4rem;padding-block:8.9rem 3.949rem}@media (min-width: 768px){.puro__blog-list{padding-inline:5rem}}@media (min-width: 1024px){.puro__blog-list{padding-block:6.5rem 4.8rem}}@media (min-width: 1680px){.puro__blog-list{padding-inline:14rem;padding-block:10.4rem 10.407rem}}.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-family:Gilroy,sans-serif;text-transform:uppercase;margin-bottom:1.5rem;text-align:center;opacity:.8;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:2rem;line-height:1.3345;letter-spacing:.2rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:Gilroy,sans-serif;text-transform:uppercase;text-align:center;margin-bottom:1.5rem;font-weight:700;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}@media (min-width: 1680px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:4.2rem 2.8rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{text-align:center;margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{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{width:70%!important;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-8 .pagination__controls .btn__group .btn__primary--outline{width:30%!important}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{margin:0;overflow:hidden;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{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.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:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;opacity:.8;padding-left:2.2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.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.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){.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:2rem;line-height:1.53;letter-spacing:.06rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.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:1.4rem}@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{opacity:.8;text-transform:uppercase;font-family:Gilroy,sans-serif;margin-bottom:2rem;font-size:1.6rem;line-height:1.2;letter-spacing:.16rem}@media (min-width: 1280px){:host ::ng-deep .puro__blog-list--pretitle{font-size:2rem;line-height:1.8195;letter-spacing:.2rem}}:host ::ng-deep .puro__blog-list--title{font-family:Cralika;margin-bottom:2rem;font-size:2.4rem;line-height:1.52875;letter-spacing:.048rem}@media (min-width: 1280px){:host ::ng-deep .puro__blog-list--title{font-size:5rem;line-height:1.392;letter-spacing:.1rem}}: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{opacity:.8;font-family:Gilroy,sans-serif;text-transform:uppercase;margin-inline:.7rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){:host ::ng-deep .cs_sidebar_item--title{font-size:1.6rem;line-height:1.7;letter-spacing:.048rem}}@media (min-width: 1280px){:host ::ng-deep .cs_sidebar_item--title{font-size:2rem;line-height:1.53;letter-spacing:.06rem}}\n"] }]
|
|
1586
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"puro__blog-list margin-main generalMargin\">\n <div class=\"container\">\n <div class=\"intro_info align--center\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'h3'\"\n cssClass=\"puro__blog-list--pretitle\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h1'\"\n cssClass=\"puro__blog-list--title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n </div>\n <div class=\"container-fluid cs_plr_100\">\n <div class=\"row cs_gap_y_lg_80\">\n @if (filteredPosts) {\n <div\n class=\"col-lg-8\"\n *libPaginate=\"\n filteredPosts;\n pageSize: pageSize;\n let paged = pagedItems;\n let page = currentPage;\n let total = totalPages;\n let next = next;\n let prev = prev\n \"\n >\n @for (post of paged; track $index) {\n <div class=\"cs_post cs_style_1 cs_size_5\">\n <a\n [attr.aria-label]=\"post.postUrl?.label\"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"cs_post_thumb cs--radius overflow-hidden d-block cs_mb_30 position-relative\"\n >\n @if (post.img) {\n <img\n [ngSrc]=\"post.img.src\"\n [alt]=\"post.img.alt\"\n width=\"390\"\n height=\"420\"\n priority\n />\n }\n <span\n class=\"cs_hover_icon cs_center position-absolute cs_white_color cs_zindex_2 cs--radius\"\n >\n <span class=\"babylon-arrow_btn\"></span>\n </span>\n </a>\n <div class=\"cs_post_info intro_info no-align\">\n <div class=\"cs_post_meta_4 cs_mb_13 pretitle\">\n <!-- @if (post.category) {\n <span>{{ post.category }}</span>\n } -->\n @if (post.date) {\n <span>{{\n post.date | date: 'dd/MM/yyyy'\n }}</span>\n }\n </div>\n @if (post.title) {\n <h2 class=\"cs_post_title title1\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"post.postUrl?.linkType\"\n class=\"title--small\"\n >{{ post.title }}</a\n >\n </h2>\n }\n @if (post.description) {\n <p\n class=\"cs_subtitle\"\n [innerHTML]=\"post.description\"\n ></p>\n }\n @if (post.buttons?.length) {\n <div class=\"btn__group\">\n @for (\n button of post.buttons;\n track $index;\n let odd = $odd\n ) {\n <a\n [attr.aria-label]=\"button.label\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn_primary: !odd,\n btn_call: odd,\n }\"\n >\n <b>{{ button.label }}</b>\n <span\n class=\"babylon-arrow-right-big\"\n ></span>\n </a>\n }\n </div>\n }\n </div>\n </div>\n }\n @if (total > 1 && anterior && siguiente) {\n <div class=\"pagination__controls align--center mt--20\">\n <div class=\"btn__group align--center\">\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === 1\"\n (click)=\"prev()\"\n [attr.aria-label]=\"anterior\"\n >\n <b>{{ anterior }}</b>\n </button>\n <button\n class=\"btn btn__primary--outline\"\n [disabled]=\"page === total\"\n (click)=\"next()\"\n [attr.aria-label]=\"siguiente\"\n >\n <b>{{ siguiente }}</b>\n </button>\n </div>\n </div>\n }\n </div>\n }\n @if (!filteredPosts || filteredPosts.length == 0) {\n <div class=\"col-lg-8\">\n <div class=\"cs_no_results\">\n <lib-puro-dynamic-heading\n [tag]=\"'h3'\"\n cssClass=\"title--small\"\n [color]=\"\"\n [content]=\"notfoundText || 'No results found'\"\n ></lib-puro-dynamic-heading>\n </div>\n </div>\n }\n <div class=\"col-lg-4\">\n <div class=\"cs_sidebar cs_right_sidebar\">\n <lib-puro-search\n [searchPlaceHolder]=\"searchPlaceHolder ?? 'search...'\"\n [elements]=\"posts\"\n [fields]=\"[\n 'title',\n 'subtitle',\n 'description',\n 'category',\n 'date',\n ]\"\n (results)=\"search($event)\"\n ></lib-puro-search>\n <div class=\"cs_sidebar__item widget_categories\">\n @if (categoriesTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (categories?.length) {\n <ul>\n @for (category of categories; track $index) {\n <li class=\"cat-item\">\n <div class=\"cat-item--wrapper\">\n <a\n aria-label=\"label\"\n href=\"#\"\n (click)=\"\n setCategoryFilter(\n category.title\n );\n $event.preventDefault()\n \"\n >{{ category.title }}\n <span\n >({{\n category.posts\n }})</span\n ></a\n >\n @if (\n currentCategory ===\n category.title?.toLowerCase()\n ) {\n <div\n class=\"btn-category-container\"\n >\n <button\n aria-label=\"Eliminar filtro\"\n class=\"remove-category\"\n (click)=\"\n setCategoryFilter();\n $event.preventDefault()\n \"\n >\n <i class=\"icon-95\"></i>\n </button>\n </div>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n <div class=\"cs_sidebar__item--mobile widget_categories\">\n @if (categoriesTitle) {\n <div (click)=\"toggleCollapse(0)\">\n <lib-puro-dynamic-heading\n [tag]=\"tags?.categoriesTitle || 'h4'\"\n cssClass=\"cs_sidebar_item--title\"\n [color]=\"textColors?.categoriesTitle\"\n [content]=\"categoriesTitle\"\n ></lib-puro-dynamic-heading>\n <i\n class=\"blog-list__iconCollapse icon-91\"\n [ngClass]=\"{\n 'blog-list__iconCollapse--collapsed':\n !collapsed[0],\n }\"\n ></i>\n </div>\n }\n @if (categories?.length) {\n <ul\n class=\"blog-list__items\"\n [ngClass]=\"{\n 'blog-list__items--collapsed': 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': collapsed[1],\n }\"\n >\n @for (post of latestPosts; track $index) {\n <li>\n <div class=\"cs_recent_post\">\n <h3 class=\"title--smaller mb--10\">\n <a\n [attr.aria-label]=\"\n post.postUrl?.label\n \"\n [href]=\"post.postUrl?.url\"\n [linkType]=\"\n post.postUrl?.linkType\n \"\n >{{ post.title }}</a\n >\n </h3>\n @if (post.date) {\n <em class=\"text--small\">{{\n post.date\n | date: 'mediumDate'\n }}</em>\n }\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: ["@charset \"UTF-8\";.puro__blog-list .cs_image_layer img{aspect-ratio:785/576;width:100%}.puro__blog-list .container{width:100%}@media (min-width: 1024px){.puro__blog-list .container{width:60%;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .container{width:66.67%;padding-right:3.6rem}}.puro__blog-list .container .intro_info{width:100%}@media (min-width: 1280px){.puro__blog-list .container .intro_info{width:20%}}.puro__blog-list .container .intro_info{text-align:center}.puro__blog-list .row{width:100%;display:flex;justify-content:center;flex-direction:column-reverse;gap:4rem}@media (min-width: 1024px){.puro__blog-list .row{flex-direction:row;gap:0px}}.puro__blog-list .row .col-lg-8{display:flex;flex-direction:column;gap:4rem;width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8{width:60%;gap:8rem;padding-right:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8{width:66.67%;padding-right:3.6rem}}.puro__blog-list .row .col-lg-8 .cs_post{display:flex;flex-direction:column;max-height:none;width:100%;transition:all .2s}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post{flex-direction:row;max-height:465px}}.puro__blog-list .row .col-lg-8 .cs_post .pretitle{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.8rem;line-height:1.4827777778;letter-spacing:.18rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post .pretitle{font-size:1.5rem;line-height:1.7793333333;letter-spacing:.15rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_title{font-family:var(--font-title);font-style:normal;color:var(--cl-title);margin-bottom:2rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-8 .cs_post_title{font-size:2.8rem;line-height:1.0714285714;letter-spacing:.056rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-8 .cs_post_info{width:100%;background:#ffffff90;padding-inline:2rem;padding-block:4.2rem 2.8rem;display:flex;flex-direction:column;justify-content:start}@media (min-width: 1280px){.puro__blog-list .row .col-lg-8 .cs_post_info{padding-inline:5rem;padding-block:2.8rem;width:70%}}.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{margin-bottom:1.5rem;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:1.4rem;line-height:1.7;letter-spacing:.042rem}@media (min-width: 768px){.puro__blog-list .row .col-lg-8 .cs_post_info .cs_subtitle{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{width:70%!important;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-8 .pagination__controls .btn__group .btn__primary--outline{width:30%!important}.puro__blog-list .row .col-lg-4{width:100%}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4{width:40%;padding-left:3.6rem}}@media (min-width: 1280px){.puro__blog-list .row .col-lg-4{width:33.33%}}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse{width:17px;height:15px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.puro__blog-list .row .col-lg-4 .blog-list__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.puro__blog-list .row .col-lg-4 .blog-list__items{transition:all .2s}.puro__blog-list .row .col-lg-4 .blog-list__items--collapsed{margin:0;overflow:hidden;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{margin-bottom:2.7rem}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar{margin-bottom:6.7rem}}.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:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--cl-text-dark)}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories{padding-bottom:2rem;margin-bottom:2rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{list-style:inherit;padding-left:2.2rem;text-transform:uppercase;transition:all .5s;margin-inline:auto;line-height:1.7;letter-spacing:.054rem}@media (max-width: 1023.98px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.4rem;line-height:2.1428571429;letter-spacing:.042rem}}@media (min-width: 1024px){.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul{font-size:1.8rem;line-height:1.7;letter-spacing:.054rem;margin-bottom:3rem}}.puro__blog-list .row .col-lg-4 .cs_sidebar__item.widget_categories ul li:first-child,.puro__blog-list .row .col-lg-4 .cs_sidebar__item--mobile.widget_categories ul li:first-child{margin-top:2rem}.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:1.4rem}@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: [{
|
|
@@ -1958,11 +1958,11 @@ class PuroFilterComponent {
|
|
|
1958
1958
|
this.collapsed[index] = !this.collapsed[index];
|
|
1959
1959
|
}
|
|
1960
1960
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroFilterComponent, isStandalone: true, selector: "lib-puro-filter", inputs: { filters: "filters" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "@if (filters && filters.length > 0) {\n <section class=\"menu-tabs\">\n <div class=\"menu-tabs__container\">\n <ul class=\"menu-tabs__list\">\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n <div class=\"menu-tabs__container--mobile\" (click)=\"toggleCollapse(0)\">\n <div class=\"menu-tabs__iconCollapse--wrapper\">\n <i\n class=\"menu-tabs__iconCollapse icon-91\"\n [ngClass]=\"{\n 'menu-tabs__iconCollapse--collapsed': !collapsed[0],\n }\"\n ></i>\n </div>\n\n <ul\n class=\"menu-tabs__list\"\n [ngClass]=\"{\n 'menu-tabs__list--collapsed': collapsed[0],\n }\"\n >\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n </section>\n}\n", styles: [".menu-tabs{
|
|
1961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroFilterComponent, isStandalone: true, selector: "lib-puro-filter", inputs: { filters: "filters" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "@if (filters && filters.length > 0) {\n <section class=\"menu-tabs generalMargin\">\n <div class=\"menu-tabs__container\">\n <ul class=\"menu-tabs__list\">\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n <div class=\"menu-tabs__container--mobile\" (click)=\"toggleCollapse(0)\">\n <div class=\"menu-tabs__iconCollapse--wrapper\">\n <i\n class=\"menu-tabs__iconCollapse icon-91\"\n [ngClass]=\"{\n 'menu-tabs__iconCollapse--collapsed': !collapsed[0],\n }\"\n ></i>\n </div>\n\n <ul\n class=\"menu-tabs__list\"\n [ngClass]=\"{\n 'menu-tabs__list--collapsed': collapsed[0],\n }\"\n >\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n </section>\n}\n", styles: [".menu-tabs{position:sticky;z-index:2}.menu-tabs__container{margin:0 auto;text-align:center;display:none}@media (min-width: 768px){.menu-tabs__container{display:block}}@media (min-width: 768px){.menu-tabs__container--mobile{display:none}}.menu-tabs__iconCollapse{width:17px;height:33px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.menu-tabs__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.menu-tabs__iconCollapse--wrapper{width:100%;display:flex;justify-content:center}.menu-tabs__list{list-style:none;display:flex;justify-content:center;margin:0;flex-direction:column;transition:all .5s}@media (min-width: 768px){.menu-tabs__list{flex-direction:row;gap:4rem}}.menu-tabs__list--collapsed{height:0;margin:0}.menu-tabs__list--collapsed li{display:none}.menu-tabs__item{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;text-align:left;margin-bottom:2rem}@media (max-width: 1023.98px){.menu-tabs__item{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){.menu-tabs__item{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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1962
1962
|
}
|
|
1963
1963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroFilterComponent, decorators: [{
|
|
1964
1964
|
type: Component,
|
|
1965
|
-
args: [{ selector: 'lib-puro-filter', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (filters && filters.length > 0) {\n <section class=\"menu-tabs\">\n <div class=\"menu-tabs__container\">\n <ul class=\"menu-tabs__list\">\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n <div class=\"menu-tabs__container--mobile\" (click)=\"toggleCollapse(0)\">\n <div class=\"menu-tabs__iconCollapse--wrapper\">\n <i\n class=\"menu-tabs__iconCollapse icon-91\"\n [ngClass]=\"{\n 'menu-tabs__iconCollapse--collapsed': !collapsed[0],\n }\"\n ></i>\n </div>\n\n <ul\n class=\"menu-tabs__list\"\n [ngClass]=\"{\n 'menu-tabs__list--collapsed': collapsed[0],\n }\"\n >\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n </section>\n}\n", styles: [".menu-tabs{
|
|
1965
|
+
args: [{ selector: 'lib-puro-filter', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (filters && filters.length > 0) {\n <section class=\"menu-tabs generalMargin\">\n <div class=\"menu-tabs__container\">\n <ul class=\"menu-tabs__list\">\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n <div class=\"menu-tabs__container--mobile\" (click)=\"toggleCollapse(0)\">\n <div class=\"menu-tabs__iconCollapse--wrapper\">\n <i\n class=\"menu-tabs__iconCollapse icon-91\"\n [ngClass]=\"{\n 'menu-tabs__iconCollapse--collapsed': !collapsed[0],\n }\"\n ></i>\n </div>\n\n <ul\n class=\"menu-tabs__list\"\n [ngClass]=\"{\n 'menu-tabs__list--collapsed': collapsed[0],\n }\"\n >\n @for (filter of filters; track $index) {\n <li\n class=\"menu-tabs__item\"\n [class.active]=\"filter.code === activeCode()\"\n (click)=\"selectFilter(filter.code)\"\n >\n {{ filter.name }}\n </li>\n }\n </ul>\n </div>\n </section>\n}\n", styles: [".menu-tabs{position:sticky;z-index:2}.menu-tabs__container{margin:0 auto;text-align:center;display:none}@media (min-width: 768px){.menu-tabs__container{display:block}}@media (min-width: 768px){.menu-tabs__container--mobile{display:none}}.menu-tabs__iconCollapse{width:17px;height:33px;color:#616160;opacity:.4;transition:all .2s;width:max-content;display:flex;align-items:center}.menu-tabs__iconCollapse--collapsed{transform:rotate(180deg);right:-18.5px}.menu-tabs__iconCollapse--wrapper{width:100%;display:flex;justify-content:center}.menu-tabs__list{list-style:none;display:flex;justify-content:center;margin:0;flex-direction:column;transition:all .5s}@media (min-width: 768px){.menu-tabs__list{flex-direction:row;gap:4rem}}.menu-tabs__list--collapsed{height:0;margin:0}.menu-tabs__list--collapsed li{display:none}.menu-tabs__item{text-transform:uppercase;display:block;font-weight:500;color:var(--reservar-filter-bg);transition:all .5s;text-align:left;margin-bottom:2rem}@media (max-width: 1023.98px){.menu-tabs__item{font-size:1.6rem;line-height:1.668125;letter-spacing:.16rem}}@media (min-width: 1024px){.menu-tabs__item{font-size:2rem;line-height:1.3345;letter-spacing:.2rem;margin-bottom:3rem}}\n"] }]
|
|
1966
1966
|
}], propDecorators: { filters: [{
|
|
1967
1967
|
type: Input
|
|
1968
1968
|
}], filterChange: [{
|
|
@@ -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\">\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;
|
|
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:min(100%,var(--container-max));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}@media (max-width: 1023.98px){.info-card__sectionTitle{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.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\">\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;
|
|
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:min(100%,var(--container-max));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}@media (max-width: 1023.98px){.info-card__sectionTitle{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem}}@media (min-width: 1024px){.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: [{
|
|
@@ -2192,7 +2192,7 @@ class PuroContactFormComponent {
|
|
|
2192
2192
|
};
|
|
2193
2193
|
}
|
|
2194
2194
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroContactFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroContactFormComponent, isStandalone: true, selector: "lib-puro-contact-form", inputs: { title: "title", subtitle: "subtitle", promotions: "promotions", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", prefix: "prefix", dropdown: "dropdown", ndDropdown: "ndDropdown", textarea: "textarea", button: "button", emailInput: "emailInput", nameInput: "nameInput", surnameInput: "surnameInput", phoneInput: "phoneInput", tags: "tags", textColors: "textColors", isHotels: "isHotels", hotelID: "hotelID" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"contactForm\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <div class=\"contactForm__inner\">\n <div class=\"contactForm__graphic\">\n <div class=\"contactForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"contactForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"contactForm__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"contactForm__paragraph\"\n [innerHtml]=\"subtitle\"\n ></div>\n }\n\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <!-- Dropdown 1 -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (dropdown && !isHotels) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"dropdown\"\n >\n <option value=\"\">\n {{ dropdown.placeholder }}\n </option>\n @for (\n option of dropdown.options;\n track $index\n ) {\n @if (option) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Dropdown 2 + Email -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (ndDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"ndDropdown\"\n >\n <option value=\"\">\n {{ ndDropdown.title }}\n </option>\n @for (\n option of ndDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n [formControlName]=\"emailInput.name!\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"19\"\n height=\"15\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Nombre y Apellidos -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange($event, surnameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo y Tel\u00E9fono -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n [formControlName]=\"phoneInput.name!\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Mensaje -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (textarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"textarea.placeholder\"\n [formControlName]=\"textarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span\n [innerHTML]=\"conditionsLink\"\n ></span>\n </label>\n }\n @if (promotions) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"promotions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ promotions }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (button) {\n @if (button.url) {\n <a [href]=\"button.url\" [linkType]=\"button.linkType\">\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n </a>\n }\n @else {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n }\n }\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".form-error{position:relative;color:var(--grey);z-index:1;bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
2195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroContactFormComponent, isStandalone: true, selector: "lib-puro-contact-form", inputs: { title: "title", subtitle: "subtitle", promotions: "promotions", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", prefix: "prefix", dropdown: "dropdown", ndDropdown: "ndDropdown", textarea: "textarea", button: "button", emailInput: "emailInput", nameInput: "nameInput", surnameInput: "surnameInput", phoneInput: "phoneInput", tags: "tags", textColors: "textColors", isHotels: "isHotels", hotelID: "hotelID" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"contactForm generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <div class=\"contactForm__inner\">\n <div class=\"contactForm__graphic\">\n <div class=\"contactForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"contactForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"contactForm__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"contactForm__paragraph\"\n [innerHtml]=\"subtitle\"\n ></div>\n }\n\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <!-- Dropdown 1 -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (dropdown && !isHotels) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"dropdown\"\n >\n <option value=\"\">\n {{ dropdown.placeholder }}\n </option>\n @for (\n option of dropdown.options;\n track $index\n ) {\n @if (option) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Dropdown 2 + Email -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (ndDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"ndDropdown\"\n >\n <option value=\"\">\n {{ ndDropdown.title }}\n </option>\n @for (\n option of ndDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n [formControlName]=\"emailInput.name!\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"19\"\n height=\"15\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Nombre y Apellidos -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange($event, surnameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo y Tel\u00E9fono -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n [formControlName]=\"phoneInput.name!\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Mensaje -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (textarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"textarea.placeholder\"\n [formControlName]=\"textarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span\n [innerHTML]=\"conditionsLink\"\n ></span>\n </label>\n }\n @if (promotions) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"promotions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ promotions }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (button) {\n @if (button.url) {\n <a [href]=\"button.url\" [linkType]=\"button.linkType\">\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n </a>\n }\n @else {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n }\n }\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".form-error{position:relative;color:var(--grey);z-index:1;bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
2196
2196
|
}
|
|
2197
2197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroContactFormComponent, decorators: [{
|
|
2198
2198
|
type: Component,
|
|
@@ -2203,7 +2203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2203
2203
|
PuroLinkTypeDirective,
|
|
2204
2204
|
PuroDynamicHeadingComponent,
|
|
2205
2205
|
NgOptimizedImage,
|
|
2206
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"contactForm\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <div class=\"contactForm__inner\">\n <div class=\"contactForm__graphic\">\n <div class=\"contactForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"contactForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"contactForm__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"contactForm__paragraph\"\n [innerHtml]=\"subtitle\"\n ></div>\n }\n\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <!-- Dropdown 1 -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (dropdown && !isHotels) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"dropdown\"\n >\n <option value=\"\">\n {{ dropdown.placeholder }}\n </option>\n @for (\n option of dropdown.options;\n track $index\n ) {\n @if (option) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Dropdown 2 + Email -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (ndDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"ndDropdown\"\n >\n <option value=\"\">\n {{ ndDropdown.title }}\n </option>\n @for (\n option of ndDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n [formControlName]=\"emailInput.name!\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"19\"\n height=\"15\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Nombre y Apellidos -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange($event, surnameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo y Tel\u00E9fono -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n [formControlName]=\"phoneInput.name!\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Mensaje -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (textarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"textarea.placeholder\"\n [formControlName]=\"textarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span\n [innerHTML]=\"conditionsLink\"\n ></span>\n </label>\n }\n @if (promotions) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"promotions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ promotions }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (button) {\n @if (button.url) {\n <a [href]=\"button.url\" [linkType]=\"button.linkType\">\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n </a>\n }\n @else {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n }\n }\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".form-error{position:relative;color:var(--grey);z-index:1;bottom:20px}\n"] }]
|
|
2206
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"contactForm generalMargin\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <div class=\"contactForm__inner\">\n <div class=\"contactForm__graphic\">\n <div class=\"contactForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"contactForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"contactForm__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"contactForm__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"contactForm__paragraph\"\n [innerHtml]=\"subtitle\"\n ></div>\n }\n\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <!-- Dropdown 1 -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (dropdown && !isHotels) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"dropdown\"\n >\n <option value=\"\">\n {{ dropdown.placeholder }}\n </option>\n @for (\n option of dropdown.options;\n track $index\n ) {\n @if (option) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Dropdown 2 + Email -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (ndDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"ndDropdown\"\n >\n <option value=\"\">\n {{ ndDropdown.title }}\n </option>\n @for (\n option of ndDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n [formControlName]=\"emailInput.name!\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"19\"\n height=\"15\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Nombre y Apellidos -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange($event, surnameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo y Tel\u00E9fono -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"contactForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n [formControlName]=\"phoneInput.name!\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Mensaje -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n @if (textarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"textarea.placeholder\"\n [formControlName]=\"textarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"contactForm__row\">\n <div class=\"contactForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span\n [innerHTML]=\"conditionsLink\"\n ></span>\n </label>\n }\n @if (promotions) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"promotions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ promotions }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (button) {\n @if (button.url) {\n <a [href]=\"button.url\" [linkType]=\"button.linkType\">\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n </a>\n }\n @else {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"button.label\"\n [disabled]=\"form.invalid\"\n (click)=\"submitForm($event)\"\n >\n <span>{{ button.label }}</span>\n </button>\n }\n }\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".form-error{position:relative;color:var(--grey);z-index:1;bottom:20px}\n"] }]
|
|
2207
2207
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
2208
2208
|
type: Input
|
|
2209
2209
|
}], subtitle: [{
|
|
@@ -2920,7 +2920,7 @@ class PuroEngineModalComponent {
|
|
|
2920
2920
|
this.modal.closeEngine();
|
|
2921
2921
|
}
|
|
2922
2922
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEngineModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEngineModalComponent, isStandalone: true, selector: "lib-puro-engine-modal", inputs: { isHotel: "isHotel" }, ngImport: i0, template: "@if (isOpen()) {\n <section class=\"engine-modal\">\n <div class=\"engine-modal__overlay\" (click)=\"close()\"></div>\n <div class=\"engine-modal__content\">\n <button class=\"engine-modal__close\" type=\"button\" (click)=\"close()\">\n \u2715\n </button>\n\n <section class=\"booking\">\n <!-- \uD83D\uDD39 Slider de ventajas -->\n <div\n class=\"booking__advantages js-active-slider\"\n data-slider_name=\"js-adv-slider\"\n [puroSlider]=\"data()?.advantages?.items\"\n >\n <div class=\"booking__advantages--inner\">\n @if (data()?.titleAdvantages) {\n <lib-puro-dynamic-heading\n [tag]=\"data()?.tags?.title || 'span'\"\n cssClass=\"booking__title\"\n [content]=\"data()?.titleAdvantages\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"js-adv-slider adv__slider\">\n @for (\n item of data()?.advantages?.items;\n track $index\n ) {\n <div class=\"booking__advItem\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n @if (item.description) {\n <span>{{ item.description }}</span>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 FORMULARIO -->\n @if (form) {\n <div class=\"booking__form\">\n <div class=\"booking__form--inner\">\n <form\n [formGroup]=\"form\"\n (submit)=\"onSubmit($event)\"\n scriptLoader\n [dataLoaded]=\"true\"\n >\n @if (data()?.engine?.title) {\n <span class=\"booking__title\">{{\n data()?.engine?.title\n }}</span>\n }\n\n <div class=\"booking__box\">\n @if (!isHotel) {\n <!-- \uD83D\uDD39 LOCATION -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner\"\n style=\"\n --label-left-position: 34rem;\n \"\n >\n @if (\n data()?.engine\n ?.locationDropdown\n ?.title\n ) {\n <label\n class=\"booking__fieldLabel\"\n for=\"location\"\n >\n <span>{{\n data()?.engine\n ?.locationDropdown\n ?.title\n }}</span>\n </label>\n }\n <select\n class=\"booking__fieldControl\"\n formControlName=\"location\"\n id=\"location\"\n (input)=\"\n changeHotelLabelPosition(\n $event\n )\n \"\n >\n @for (\n option of data()?.engine\n ?.locationDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-62\"></i>\n </div>\n </div>\n </div>\n }\n\n <!-- \uD83D\uDD39 DATEPICKERS -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"In-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine?.datepickerIn\n ?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"In-date2\"\n formControlName=\"datepickerIn\"\n [placeholder]=\"\n data()?.engine?.datepickerIn\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"Out-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.datepickerOut?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"Out-date2\"\n formControlName=\"datepickerOut\"\n [placeholder]=\"\n data()?.engine\n ?.datepickerOut\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 GUESTS -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner js-personas-subfields\"\n role=\"button\"\n >\n <label\n class=\"booking__fieldLabel\"\n for=\"guests\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine?.guestsInput\n ?.title\n }}</span>\n </label>\n <div class=\"booking__fieldControl\">\n 00\n </div>\n <div class=\"booking__fieldIcon\">\n <svg width=\"15\" height=\"8\">\n <use\n href=\"#select-arrow\"\n ></use>\n </svg>\n </div>\n </div>\n\n <div\n class=\"booking__fieldSub js-fieldSub\"\n >\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"adult\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.adultsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"adult1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.adultsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-92\"></i>\n </div>\n </div>\n\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"child\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.kidsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"child1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.kidsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-93\"></i>\n </div>\n </div>\n\n <div class=\"btn__group\">\n <button\n type=\"button\"\n class=\"btn btn__primary js-apply-guests1\"\n (click)=\"applyGuests()\"\n >\n <span>{{\n data()?.engine?.btnApply\n ?.label ?? 'Apply'\n }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 PROMO -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n style=\"\n --label-left-position: 9rem;\n \"\n for=\"promo\"\n >\n <span>{{\n data()?.engine?.promoInput\n ?.title\n }}</span>\n </label>\n <input\n id=\"promo\"\n type=\"text\"\n placeholder=\"xxxx\"\n class=\"booking__fieldControl\"\n formControlName=\"promoInput\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-90\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 SUBMIT -->\n <div class=\"btn__group\">\n <button\n type=\"submit\"\n class=\"btn btn__primary\"\n >\n <span>{{\n data()?.engine?.button?.label\n }}</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n </section>\n </div>\n </section>\n}\n", styles: [":host ::ng-deep .booking__fieldLabel{margin-left:var(--label-left-position, 0)}.booking__fieldControl{font-family:var(--font-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEngineModalComponent, isStandalone: true, selector: "lib-puro-engine-modal", inputs: { isHotel: "isHotel" }, ngImport: i0, template: "@if (isOpen()) {\n <section class=\"engine-modal\">\n <div class=\"engine-modal__overlay\" (click)=\"close()\"></div>\n <div class=\"engine-modal__content\">\n <button class=\"engine-modal__close\" type=\"button\" (click)=\"close()\">\n \u2715\n </button>\n\n <section class=\"booking\">\n <!-- \uD83D\uDD39 Slider de ventajas -->\n <div\n class=\"booking__advantages js-active-slider\"\n [puroSlider]=\"data()?.advantages\"\n data-slidesrows_pc=\"3\"\n data-slidesrows_laptop=\"3\"\n data-slidesrows_tablet=\"3\"\n data-slidesrows_mobile=\"3\"\n data-slidesrows_mobile_small=\"3\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-adv-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"false\"\n data-slides_pc=\"1\"\n >\n <div class=\"booking__advantages--inner\">\n @if (data()?.titleAdvantages) {\n <lib-puro-dynamic-heading\n [tag]=\"data()?.tags?.title || 'span'\"\n cssClass=\"booking__title\"\n [content]=\"data()?.titleAdvantages\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"js-adv-slider adv__slider\">\n @for (\n item of data()?.advantages;\n track $index\n ) {\n <div class=\"booking__advItem\">\n @if (item.icon) {\n <div class=\"booking__advIcon\">\n <i class=\"icon-{{ item.icon }}\"></i>\n </div>\n }\n @if (item.title) {\n <span class=\"booking__advText\">{{ item.title }}</span>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 FORMULARIO -->\n @if (form) {\n <div class=\"booking__form\">\n <div class=\"booking__form--inner\">\n <form\n [formGroup]=\"form\"\n (submit)=\"onSubmit($event)\"\n scriptLoader\n [dataLoaded]=\"true\"\n >\n @if (data()?.engine?.title) {\n <span class=\"booking__title\">{{\n data()?.engine?.title\n }}</span>\n }\n\n <div class=\"booking__box\">\n @if (!isHotel) {\n <!-- \uD83D\uDD39 LOCATION -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner\"\n style=\"\n --label-left-position: 34rem;\n \"\n >\n @if (\n data()?.engine\n ?.locationDropdown\n ?.title\n ) {\n <label\n class=\"booking__fieldLabel\"\n for=\"location\"\n >\n <span>{{\n data()?.engine\n ?.locationDropdown\n ?.title\n }}</span>\n </label>\n }\n <select\n class=\"booking__fieldControl\"\n formControlName=\"location\"\n id=\"location\"\n (input)=\"\n changeHotelLabelPosition(\n $event\n )\n \"\n >\n @for (\n option of data()?.engine\n ?.locationDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-62\"></i>\n </div>\n </div>\n </div>\n }\n\n <!-- \uD83D\uDD39 DATEPICKERS -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"In-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine?.datepickerIn\n ?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"In-date2\"\n formControlName=\"datepickerIn\"\n [placeholder]=\"\n data()?.engine?.datepickerIn\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"Out-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.datepickerOut?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"Out-date2\"\n formControlName=\"datepickerOut\"\n [placeholder]=\"\n data()?.engine\n ?.datepickerOut\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 GUESTS -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner js-personas-subfields\"\n role=\"button\"\n >\n <label\n class=\"booking__fieldLabel\"\n for=\"guests\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine?.guestsInput\n ?.title\n }}</span>\n </label>\n <div class=\"booking__fieldControl\">\n 00\n </div>\n <div class=\"booking__fieldIcon\">\n <svg width=\"15\" height=\"8\">\n <use\n href=\"#select-arrow\"\n ></use>\n </svg>\n </div>\n </div>\n\n <div\n class=\"booking__fieldSub js-fieldSub\"\n >\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"adult\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.adultsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"adult1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.adultsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-92\"></i>\n </div>\n </div>\n\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"child\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.kidsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"child1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.kidsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-93\"></i>\n </div>\n </div>\n\n <div class=\"btn__group\">\n <button\n type=\"button\"\n class=\"btn btn__primary js-apply-guests1\"\n (click)=\"applyGuests()\"\n >\n <span>{{\n data()?.engine?.btnApply\n ?.label ?? 'Apply'\n }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 PROMO -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n style=\"\n --label-left-position: 9rem;\n \"\n for=\"promo\"\n >\n <span>{{\n data()?.engine?.promoInput\n ?.title\n }}</span>\n </label>\n <input\n id=\"promo\"\n type=\"text\"\n placeholder=\"xxxx\"\n class=\"booking__fieldControl\"\n formControlName=\"promoInput\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-90\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 SUBMIT -->\n <div class=\"btn__group\">\n <button\n type=\"submit\"\n class=\"btn btn__primary\"\n >\n <span>{{\n data()?.engine?.button?.label\n }}</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n </section>\n </div>\n </section>\n}\n", styles: [":host ::ng-deep .booking__fieldLabel{margin-left:var(--label-left-position, 0)}.booking__fieldControl{font-family:var(--font-text)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2924
2924
|
}
|
|
2925
2925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEngineModalComponent, decorators: [{
|
|
2926
2926
|
type: Component,
|
|
@@ -2930,7 +2930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2930
2930
|
PuroSliderDirective,
|
|
2931
2931
|
PuroDynamicHeadingComponent,
|
|
2932
2932
|
PuroScriptDirective,
|
|
2933
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <section class=\"engine-modal\">\n <div class=\"engine-modal__overlay\" (click)=\"close()\"></div>\n <div class=\"engine-modal__content\">\n <button class=\"engine-modal__close\" type=\"button\" (click)=\"close()\">\n \u2715\n </button>\n\n <section class=\"booking\">\n <!-- \uD83D\uDD39 Slider de ventajas -->\n <div\n class=\"booking__advantages js-active-slider\"\n data-slider_name=\"js-adv-slider\"\n [puroSlider]=\"data()?.advantages?.items\"\n >\n <div class=\"booking__advantages--inner\">\n @if (data()?.titleAdvantages) {\n <lib-puro-dynamic-heading\n [tag]=\"data()?.tags?.title || 'span'\"\n cssClass=\"booking__title\"\n [content]=\"data()?.titleAdvantages\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"js-adv-slider adv__slider\">\n @for (\n item of data()?.advantages?.items;\n track $index\n ) {\n <div class=\"booking__advItem\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n @if (item.description) {\n <span>{{ item.description }}</span>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 FORMULARIO -->\n @if (form) {\n <div class=\"booking__form\">\n <div class=\"booking__form--inner\">\n <form\n [formGroup]=\"form\"\n (submit)=\"onSubmit($event)\"\n scriptLoader\n [dataLoaded]=\"true\"\n >\n @if (data()?.engine?.title) {\n <span class=\"booking__title\">{{\n data()?.engine?.title\n }}</span>\n }\n\n <div class=\"booking__box\">\n @if (!isHotel) {\n <!-- \uD83D\uDD39 LOCATION -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner\"\n style=\"\n --label-left-position: 34rem;\n \"\n >\n @if (\n data()?.engine\n ?.locationDropdown\n ?.title\n ) {\n <label\n class=\"booking__fieldLabel\"\n for=\"location\"\n >\n <span>{{\n data()?.engine\n ?.locationDropdown\n ?.title\n }}</span>\n </label>\n }\n <select\n class=\"booking__fieldControl\"\n formControlName=\"location\"\n id=\"location\"\n (input)=\"\n changeHotelLabelPosition(\n $event\n )\n \"\n >\n @for (\n option of data()?.engine\n ?.locationDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-62\"></i>\n </div>\n </div>\n </div>\n }\n\n <!-- \uD83D\uDD39 DATEPICKERS -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"In-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine?.datepickerIn\n ?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"In-date2\"\n formControlName=\"datepickerIn\"\n [placeholder]=\"\n data()?.engine?.datepickerIn\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"Out-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.datepickerOut?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"Out-date2\"\n formControlName=\"datepickerOut\"\n [placeholder]=\"\n data()?.engine\n ?.datepickerOut\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 GUESTS -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner js-personas-subfields\"\n role=\"button\"\n >\n <label\n class=\"booking__fieldLabel\"\n for=\"guests\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine?.guestsInput\n ?.title\n }}</span>\n </label>\n <div class=\"booking__fieldControl\">\n 00\n </div>\n <div class=\"booking__fieldIcon\">\n <svg width=\"15\" height=\"8\">\n <use\n href=\"#select-arrow\"\n ></use>\n </svg>\n </div>\n </div>\n\n <div\n class=\"booking__fieldSub js-fieldSub\"\n >\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"adult\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.adultsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"adult1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.adultsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-92\"></i>\n </div>\n </div>\n\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"child\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.kidsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"child1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.kidsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-93\"></i>\n </div>\n </div>\n\n <div class=\"btn__group\">\n <button\n type=\"button\"\n class=\"btn btn__primary js-apply-guests1\"\n (click)=\"applyGuests()\"\n >\n <span>{{\n data()?.engine?.btnApply\n ?.label ?? 'Apply'\n }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 PROMO -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n style=\"\n --label-left-position: 9rem;\n \"\n for=\"promo\"\n >\n <span>{{\n data()?.engine?.promoInput\n ?.title\n }}</span>\n </label>\n <input\n id=\"promo\"\n type=\"text\"\n placeholder=\"xxxx\"\n class=\"booking__fieldControl\"\n formControlName=\"promoInput\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-90\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 SUBMIT -->\n <div class=\"btn__group\">\n <button\n type=\"submit\"\n class=\"btn btn__primary\"\n >\n <span>{{\n data()?.engine?.button?.label\n }}</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n </section>\n </div>\n </section>\n}\n", styles: [":host ::ng-deep .booking__fieldLabel{margin-left:var(--label-left-position, 0)}.booking__fieldControl{font-family:var(--font-text)}\n"] }]
|
|
2933
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <section class=\"engine-modal\">\n <div class=\"engine-modal__overlay\" (click)=\"close()\"></div>\n <div class=\"engine-modal__content\">\n <button class=\"engine-modal__close\" type=\"button\" (click)=\"close()\">\n \u2715\n </button>\n\n <section class=\"booking\">\n <!-- \uD83D\uDD39 Slider de ventajas -->\n <div\n class=\"booking__advantages js-active-slider\"\n [puroSlider]=\"data()?.advantages\"\n data-slidesrows_pc=\"3\"\n data-slidesrows_laptop=\"3\"\n data-slidesrows_tablet=\"3\"\n data-slidesrows_mobile=\"3\"\n data-slidesrows_mobile_small=\"3\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-adv-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"false\"\n data-slides_pc=\"1\"\n >\n <div class=\"booking__advantages--inner\">\n @if (data()?.titleAdvantages) {\n <lib-puro-dynamic-heading\n [tag]=\"data()?.tags?.title || 'span'\"\n cssClass=\"booking__title\"\n [content]=\"data()?.titleAdvantages\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"js-adv-slider adv__slider\">\n @for (\n item of data()?.advantages;\n track $index\n ) {\n <div class=\"booking__advItem\">\n @if (item.icon) {\n <div class=\"booking__advIcon\">\n <i class=\"icon-{{ item.icon }}\"></i>\n </div>\n }\n @if (item.title) {\n <span class=\"booking__advText\">{{ item.title }}</span>\n }\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 FORMULARIO -->\n @if (form) {\n <div class=\"booking__form\">\n <div class=\"booking__form--inner\">\n <form\n [formGroup]=\"form\"\n (submit)=\"onSubmit($event)\"\n scriptLoader\n [dataLoaded]=\"true\"\n >\n @if (data()?.engine?.title) {\n <span class=\"booking__title\">{{\n data()?.engine?.title\n }}</span>\n }\n\n <div class=\"booking__box\">\n @if (!isHotel) {\n <!-- \uD83D\uDD39 LOCATION -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner\"\n style=\"\n --label-left-position: 34rem;\n \"\n >\n @if (\n data()?.engine\n ?.locationDropdown\n ?.title\n ) {\n <label\n class=\"booking__fieldLabel\"\n for=\"location\"\n >\n <span>{{\n data()?.engine\n ?.locationDropdown\n ?.title\n }}</span>\n </label>\n }\n <select\n class=\"booking__fieldControl\"\n formControlName=\"location\"\n id=\"location\"\n (input)=\"\n changeHotelLabelPosition(\n $event\n )\n \"\n >\n @for (\n option of data()?.engine\n ?.locationDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-62\"></i>\n </div>\n </div>\n </div>\n }\n\n <!-- \uD83D\uDD39 DATEPICKERS -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"In-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine?.datepickerIn\n ?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"In-date2\"\n formControlName=\"datepickerIn\"\n [placeholder]=\"\n data()?.engine?.datepickerIn\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"Out-date2\"\n style=\"\n --label-left-position: 14rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.datepickerOut?.title\n }}</span>\n </label>\n <input\n type=\"text\"\n class=\"booking__fieldControl\"\n id=\"Out-date2\"\n formControlName=\"datepickerOut\"\n [placeholder]=\"\n data()?.engine\n ?.datepickerOut\n ?.placeholder\n \"\n data-toggle=\"datepicker1\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-89\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 GUESTS -->\n <div class=\"booking__fieldGroup\">\n <div\n class=\"booking__fieldInner js-personas-subfields\"\n role=\"button\"\n >\n <label\n class=\"booking__fieldLabel\"\n for=\"guests\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine?.guestsInput\n ?.title\n }}</span>\n </label>\n <div class=\"booking__fieldControl\">\n 00\n </div>\n <div class=\"booking__fieldIcon\">\n <svg width=\"15\" height=\"8\">\n <use\n href=\"#select-arrow\"\n ></use>\n </svg>\n </div>\n </div>\n\n <div\n class=\"booking__fieldSub js-fieldSub\"\n >\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"adult\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.adultsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"adult1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.adultsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-92\"></i>\n </div>\n </div>\n\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n for=\"child\"\n style=\"\n --label-left-position: 6rem;\n \"\n >\n <span>{{\n data()?.engine\n ?.kidsDropdown\n ?.title\n }}</span>\n </label>\n <select\n class=\"booking__fieldControl\"\n id=\"child1\"\n (change)=\"applyGuests()\"\n >\n @for (\n option of data()?.engine\n ?.kidsDropdown\n ?.options;\n track $index\n ) {\n <option\n [value]=\"\n option.code\n \"\n >\n {{ option.name }}\n </option>\n }\n </select>\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-93\"></i>\n </div>\n </div>\n\n <div class=\"btn__group\">\n <button\n type=\"button\"\n class=\"btn btn__primary js-apply-guests1\"\n (click)=\"applyGuests()\"\n >\n <span>{{\n data()?.engine?.btnApply\n ?.label ?? 'Apply'\n }}</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 PROMO -->\n <div class=\"booking__fieldGroup\">\n <div class=\"booking__fieldInner\">\n <label\n class=\"booking__fieldLabel\"\n style=\"\n --label-left-position: 9rem;\n \"\n for=\"promo\"\n >\n <span>{{\n data()?.engine?.promoInput\n ?.title\n }}</span>\n </label>\n <input\n id=\"promo\"\n type=\"text\"\n placeholder=\"xxxx\"\n class=\"booking__fieldControl\"\n formControlName=\"promoInput\"\n (input)=\"\n changeLabelPosition($event)\n \"\n />\n <div class=\"booking__fieldIcon\">\n <i class=\"icon-90\"></i>\n </div>\n </div>\n </div>\n\n <!-- \uD83D\uDD39 SUBMIT -->\n <div class=\"btn__group\">\n <button\n type=\"submit\"\n class=\"btn btn__primary\"\n >\n <span>{{\n data()?.engine?.button?.label\n }}</span>\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n </section>\n </div>\n </section>\n}\n", styles: [":host ::ng-deep .booking__fieldLabel{margin-left:var(--label-left-position, 0)}.booking__fieldControl{font-family:var(--font-text)}\n"] }]
|
|
2934
2934
|
}], ctorParameters: () => [], propDecorators: { isHotel: [{
|
|
2935
2935
|
type: Input
|
|
2936
2936
|
}] } });
|
|
@@ -3179,7 +3179,7 @@ class PuroEventsFormComponent {
|
|
|
3179
3179
|
};
|
|
3180
3180
|
}
|
|
3181
3181
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3182
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", neDropdown: "neDropdown", othersDropdown: "othersDropdown", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", companyNameInput: "companyNameInput", howTextarea: "howTextarea", infoTextarea: "infoTextarea", npInput: "npInput", dateInput: "dateInput", sHourInput: "sHourInput", fHourInput: "fHourInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", tags: "tags", textColors: "textColors" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"eventsForm\">\n <div class=\"eventsForm__inner\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <!-- Imagen -->\n <div class=\"eventsForm__graphic\">\n <div class=\"eventsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"eventsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"eventsForm__content\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (description) {\n <div class=\"eventsForm__paragraph\">{{ description }}</div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n <!-- SECTION 1 -->\n <div class=\"eventsForm__section\">\n @if (ciTitle) {\n <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n }\n\n <!-- Nombre + Apellidos -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{ nameInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"inputChange($event, surnameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{ surnameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo + Tel\u00E9fono -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"prefix\">\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (item of prefix.options || []; track $index) {\n <option [value]=\"item.code\">{{ item.name }}</option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n formControlName=\"phone\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"inputChange($event, phoneInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{ phoneInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Email -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n formControlName=\"email\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"inputChange($event, emailInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{ emailInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Empresa -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (companyNameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"companyNameInput.placeholder\"\n [formControlName]=\"companyNameInput.name!\"\n (blur)=\"validateInput(companyNameInput)\"\n (input)=\"inputChange($event, companyNameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-99\"></i>\n </span>\n </div>\n @if (!companyNameInput.valid()) {\n <span class=\"form-error\">{{ companyNameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 2 -->\n <div class=\"eventsForm__section\">\n @if (dTitle) {\n <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n }\n\n <!-- Dropdown N\u00BA personas -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (neDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"neDropdown\">\n <option value=\"\">{{ neDropdown.placeholder }}</option>\n @for (option of neDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- N\u00BA personas + Fecha -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (npInput) {\n <div class=\"form__group withIcon\">\n <input type=\"number\"\n class=\"form__control\"\n [placeholder]=\"npInput.placeholder\"\n [formControlName]=\"npInput.name!\"\n (blur)=\"validateInput(npInput)\"\n (input)=\"inputChange($event, npInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!npInput.valid()) {\n <span class=\"form-error\">{{ npInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (dateInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-89\"></i>\n </span>\n </div>\n @if (!dateInput.valid()) {\n <span class=\"form-error\">{{ dateInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Horas -->\n <div class=\"eventsForm__row\">\n\n <!-- Start Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (sHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"sHourInput.placeholder\"\n [formControlName]=\"sHourInput.name!\"\n (click)=\"openTimepicker('sHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('sHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!sHourInput.valid()) {\n <span class=\"form-error\">{{ sHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'sHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('sHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n\n <!-- End Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (fHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"fHourInput.placeholder\"\n [formControlName]=\"fHourInput.name!\"\n (click)=\"openTimepicker('fHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('fHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!fHourInput.valid()) {\n <span class=\"form-error\">{{ fHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'fHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('fHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n </div>\n\n <!-- Mensaje info -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (infoTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"infoTextarea.placeholder\"\n [formControlName]=\"infoTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 3 -->\n <div class=\"eventsForm__section\">\n @if (howTitle) {\n <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n }\n\n <!-- Dropdown -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (othersDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\"\n formControlName=\"othersDropdown\">\n <option value=\"\">\n {{ othersDropdown.placeholder }}\n </option>\n @for (option of othersDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Textarea -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (howTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"howTextarea.placeholder\"\n [formControlName]=\"howTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n <div class=\"block-checkbox\">\n\n @if (requiredLabel) {\n <span class=\"required-label\">{{ requiredLabel }}</span>\n }\n\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span [innerHTML]=\"conditionsLink\"></span>\n </label>\n }\n\n @if (others) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n type=\"submit\"\n class=\"btn btn__primary--outline btn__events-form\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"form.invalid\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n </div>\n\n </div>\n </form>\n\n }\n </div>\n\n </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", neDropdown: "neDropdown", othersDropdown: "othersDropdown", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", companyNameInput: "companyNameInput", howTextarea: "howTextarea", infoTextarea: "infoTextarea", npInput: "npInput", dateInput: "dateInput", sHourInput: "sHourInput", fHourInput: "fHourInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", tags: "tags", textColors: "textColors" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"eventsForm generalMargin\">\n <div class=\"eventsForm__inner\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <!-- Imagen -->\n <div class=\"eventsForm__graphic\">\n <div class=\"eventsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"eventsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"eventsForm__content\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (description) {\n <div class=\"eventsForm__paragraph\">{{ description }}</div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n <!-- SECTION 1 -->\n <div class=\"eventsForm__section\">\n @if (ciTitle) {\n <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n }\n\n <!-- Nombre + Apellidos -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{ nameInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"inputChange($event, surnameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{ surnameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo + Tel\u00E9fono -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"prefix\">\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (item of prefix.options || []; track $index) {\n <option [value]=\"item.code\">{{ item.name }}</option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n formControlName=\"phone\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"inputChange($event, phoneInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{ phoneInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Email -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n formControlName=\"email\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"inputChange($event, emailInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{ emailInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Empresa -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (companyNameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"companyNameInput.placeholder\"\n [formControlName]=\"companyNameInput.name!\"\n (blur)=\"validateInput(companyNameInput)\"\n (input)=\"inputChange($event, companyNameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-99\"></i>\n </span>\n </div>\n @if (!companyNameInput.valid()) {\n <span class=\"form-error\">{{ companyNameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 2 -->\n <div class=\"eventsForm__section\">\n @if (dTitle) {\n <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n }\n\n <!-- Dropdown N\u00BA personas -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (neDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"neDropdown\">\n <option value=\"\">{{ neDropdown.placeholder }}</option>\n @for (option of neDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- N\u00BA personas + Fecha -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (npInput) {\n <div class=\"form__group withIcon\">\n <input type=\"number\"\n class=\"form__control\"\n [placeholder]=\"npInput.placeholder\"\n [formControlName]=\"npInput.name!\"\n (blur)=\"validateInput(npInput)\"\n (input)=\"inputChange($event, npInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!npInput.valid()) {\n <span class=\"form-error\">{{ npInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (dateInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-89\"></i>\n </span>\n </div>\n @if (!dateInput.valid()) {\n <span class=\"form-error\">{{ dateInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Horas -->\n <div class=\"eventsForm__row\">\n\n <!-- Start Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (sHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"sHourInput.placeholder\"\n [formControlName]=\"sHourInput.name!\"\n (click)=\"openTimepicker('sHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('sHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!sHourInput.valid()) {\n <span class=\"form-error\">{{ sHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'sHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('sHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n\n <!-- End Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (fHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"fHourInput.placeholder\"\n [formControlName]=\"fHourInput.name!\"\n (click)=\"openTimepicker('fHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('fHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!fHourInput.valid()) {\n <span class=\"form-error\">{{ fHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'fHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('fHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n </div>\n\n <!-- Mensaje info -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (infoTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"infoTextarea.placeholder\"\n [formControlName]=\"infoTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 3 -->\n <div class=\"eventsForm__section\">\n @if (howTitle) {\n <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n }\n\n <!-- Dropdown -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (othersDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\"\n formControlName=\"othersDropdown\">\n <option value=\"\">\n {{ othersDropdown.placeholder }}\n </option>\n @for (option of othersDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Textarea -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (howTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"howTextarea.placeholder\"\n [formControlName]=\"howTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n <div class=\"block-checkbox\">\n\n @if (requiredLabel) {\n <span class=\"required-label\">{{ requiredLabel }}</span>\n }\n\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span [innerHTML]=\"conditionsLink\"></span>\n </label>\n }\n\n @if (others) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n type=\"submit\"\n class=\"btn btn__primary--outline btn__events-form\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"form.invalid\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n </div>\n\n </div>\n </form>\n\n }\n </div>\n\n </div>\n</section>\n", styles: [".eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:7.689rem;max-width:189.933rem}}.eventsForm__graphic{position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3183
3183
|
}
|
|
3184
3184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, decorators: [{
|
|
3185
3185
|
type: Component,
|
|
@@ -3191,7 +3191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3191
3191
|
NgOptimizedImage,
|
|
3192
3192
|
PuroLinkTypeDirective,
|
|
3193
3193
|
PuroScriptDirective,
|
|
3194
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm\">\n <div class=\"eventsForm__inner\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <!-- Imagen -->\n <div class=\"eventsForm__graphic\">\n <div class=\"eventsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"eventsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"eventsForm__content\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (description) {\n <div class=\"eventsForm__paragraph\">{{ description }}</div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n <!-- SECTION 1 -->\n <div class=\"eventsForm__section\">\n @if (ciTitle) {\n <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n }\n\n <!-- Nombre + Apellidos -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{ nameInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"inputChange($event, surnameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{ surnameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo + Tel\u00E9fono -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"prefix\">\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (item of prefix.options || []; track $index) {\n <option [value]=\"item.code\">{{ item.name }}</option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n formControlName=\"phone\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"inputChange($event, phoneInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{ phoneInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Email -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n formControlName=\"email\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"inputChange($event, emailInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{ emailInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Empresa -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (companyNameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"companyNameInput.placeholder\"\n [formControlName]=\"companyNameInput.name!\"\n (blur)=\"validateInput(companyNameInput)\"\n (input)=\"inputChange($event, companyNameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-99\"></i>\n </span>\n </div>\n @if (!companyNameInput.valid()) {\n <span class=\"form-error\">{{ companyNameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 2 -->\n <div class=\"eventsForm__section\">\n @if (dTitle) {\n <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n }\n\n <!-- Dropdown N\u00BA personas -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (neDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"neDropdown\">\n <option value=\"\">{{ neDropdown.placeholder }}</option>\n @for (option of neDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- N\u00BA personas + Fecha -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (npInput) {\n <div class=\"form__group withIcon\">\n <input type=\"number\"\n class=\"form__control\"\n [placeholder]=\"npInput.placeholder\"\n [formControlName]=\"npInput.name!\"\n (blur)=\"validateInput(npInput)\"\n (input)=\"inputChange($event, npInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!npInput.valid()) {\n <span class=\"form-error\">{{ npInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (dateInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-89\"></i>\n </span>\n </div>\n @if (!dateInput.valid()) {\n <span class=\"form-error\">{{ dateInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Horas -->\n <div class=\"eventsForm__row\">\n\n <!-- Start Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (sHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"sHourInput.placeholder\"\n [formControlName]=\"sHourInput.name!\"\n (click)=\"openTimepicker('sHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('sHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!sHourInput.valid()) {\n <span class=\"form-error\">{{ sHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'sHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('sHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n\n <!-- End Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (fHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"fHourInput.placeholder\"\n [formControlName]=\"fHourInput.name!\"\n (click)=\"openTimepicker('fHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('fHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!fHourInput.valid()) {\n <span class=\"form-error\">{{ fHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'fHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('fHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n </div>\n\n <!-- Mensaje info -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (infoTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"infoTextarea.placeholder\"\n [formControlName]=\"infoTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 3 -->\n <div class=\"eventsForm__section\">\n @if (howTitle) {\n <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n }\n\n <!-- Dropdown -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (othersDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\"\n formControlName=\"othersDropdown\">\n <option value=\"\">\n {{ othersDropdown.placeholder }}\n </option>\n @for (option of othersDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Textarea -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (howTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"howTextarea.placeholder\"\n [formControlName]=\"howTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n <div class=\"block-checkbox\">\n\n @if (requiredLabel) {\n <span class=\"required-label\">{{ requiredLabel }}</span>\n }\n\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span [innerHTML]=\"conditionsLink\"></span>\n </label>\n }\n\n @if (others) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n type=\"submit\"\n class=\"btn btn__primary--outline btn__events-form\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"form.invalid\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n </div>\n\n </div>\n </form>\n\n }\n </div>\n\n </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"] }]
|
|
3194
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm generalMargin\">\n <div class=\"eventsForm__inner\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n <!-- Imagen -->\n <div class=\"eventsForm__graphic\">\n <div class=\"eventsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"eventsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n\n <div class=\"eventsForm__content\">\n\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"eventsForm__title corp-color\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (description) {\n <div class=\"eventsForm__paragraph\">{{ description }}</div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n <!-- SECTION 1 -->\n <div class=\"eventsForm__section\">\n @if (ciTitle) {\n <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n }\n\n <!-- Nombre + Apellidos -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"nameInput.placeholder\"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"inputChange($event, nameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{ nameInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"surnameInput.placeholder\"\n [formControlName]=\"surnameInput.name!\"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"inputChange($event, surnameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{ surnameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Prefijo + Tel\u00E9fono -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"prefix\">\n @if (prefix.placeholder) {\n <option value=\"\">\n {{ prefix.placeholder }}\n </option>\n }\n @for (item of prefix.options || []; track $index) {\n <option [value]=\"item.code\">{{ item.name }}</option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input type=\"tel\"\n class=\"form__control\"\n [placeholder]=\"phoneInput.placeholder\"\n formControlName=\"phone\"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"inputChange($event, phoneInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{ phoneInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Email -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input type=\"email\"\n class=\"form__control\"\n [placeholder]=\"emailInput.placeholder\"\n formControlName=\"email\"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"inputChange($event, emailInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{ emailInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Empresa -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (companyNameInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"companyNameInput.placeholder\"\n [formControlName]=\"companyNameInput.name!\"\n (blur)=\"validateInput(companyNameInput)\"\n (input)=\"inputChange($event, companyNameInput)\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-99\"></i>\n </span>\n </div>\n @if (!companyNameInput.valid()) {\n <span class=\"form-error\">{{ companyNameInput.error }}</span>\n }\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 2 -->\n <div class=\"eventsForm__section\">\n @if (dTitle) {\n <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n }\n\n <!-- Dropdown N\u00BA personas -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (neDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\" formControlName=\"neDropdown\">\n <option value=\"\">{{ neDropdown.placeholder }}</option>\n @for (option of neDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- N\u00BA personas + Fecha -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (npInput) {\n <div class=\"form__group withIcon\">\n <input type=\"number\"\n class=\"form__control\"\n [placeholder]=\"npInput.placeholder\"\n [formControlName]=\"npInput.name!\"\n (blur)=\"validateInput(npInput)\"\n (input)=\"inputChange($event, npInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n </span>\n </div>\n @if (!npInput.valid()) {\n <span class=\"form-error\">{{ npInput.error }}</span>\n }\n }\n </div>\n\n <div class=\"eventsForm__col\">\n @if (dateInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n />\n <span class=\"icon-right corp-color\">\n <i class=\"icon-89\"></i>\n </span>\n </div>\n @if (!dateInput.valid()) {\n <span class=\"form-error\">{{ dateInput.error }}</span>\n }\n }\n </div>\n </div>\n\n <!-- Horas -->\n <div class=\"eventsForm__row\">\n\n <!-- Start Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (sHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"sHourInput.placeholder\"\n [formControlName]=\"sHourInput.name!\"\n (click)=\"openTimepicker('sHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('sHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!sHourInput.valid()) {\n <span class=\"form-error\">{{ sHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'sHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('sHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n\n <!-- End Hour -->\n <div class=\"eventsForm__col\" style=\"position: relative\">\n @if (fHourInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control timepicker-trigger\"\n readonly\n autocomplete=\"off\"\n [placeholder]=\"fHourInput.placeholder\"\n [formControlName]=\"fHourInput.name!\"\n (click)=\"openTimepicker('fHourInput', $event)\"\n />\n <span class=\"icon-right corp-color timepicker-trigger\"\n (click)=\"openTimepicker('fHourInput', $event)\">\n <i class=\"icon-100\"></i>\n </span>\n </div>\n\n @if (!fHourInput.valid()) {\n <span class=\"form-error\">{{ fHourInput.error }}</span>\n }\n\n <ul class=\"puro-timepicker\"\n *ngIf=\"activeTimepicker === 'fHourInput'\">\n <li *ngFor=\"let h of hours\"\n (click)=\"selectHour('fHourInput', h)\">\n {{ h }}\n </li>\n </ul>\n }\n </div>\n </div>\n\n <!-- Mensaje info -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (infoTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"infoTextarea.placeholder\"\n [formControlName]=\"infoTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <!-- SECTION 3 -->\n <div class=\"eventsForm__section\">\n @if (howTitle) {\n <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n }\n\n <!-- Dropdown -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (othersDropdown) {\n <div class=\"form__group withIcon\">\n <select class=\"form__control\"\n formControlName=\"othersDropdown\">\n <option value=\"\">\n {{ othersDropdown.placeholder }}\n </option>\n @for (option of othersDropdown.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right corp-color\">\n <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <!-- Textarea -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n @if (howTextarea) {\n <div class=\"form__group no-dot\">\n <textarea class=\"form__control\"\n [placeholder]=\"howTextarea.placeholder\"\n [formControlName]=\"howTextarea.name!\">\n </textarea>\n </div>\n }\n </div>\n </div>\n\n <!-- Checkboxes -->\n <div class=\"eventsForm__row\">\n <div class=\"eventsForm__col\">\n <div class=\"block-checkbox\">\n\n @if (requiredLabel) {\n <span class=\"required-label\">{{ requiredLabel }}</span>\n }\n\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span [innerHTML]=\"conditionsLink\"></span>\n </label>\n }\n\n @if (others) {\n <label class=\"form__checkbox\">\n <input type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n\n </div>\n </div>\n </div>\n\n <!-- Bot\u00F3n -->\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n type=\"submit\"\n class=\"btn btn__primary--outline btn__events-form\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"form.invalid\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n </div>\n\n </div>\n </form>\n\n }\n </div>\n\n </div>\n</section>\n", styles: [".eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:7.689rem;max-width:189.933rem}}.eventsForm__graphic{position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"] }]
|
|
3195
3195
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { title: [{
|
|
3196
3196
|
type: Input
|
|
3197
3197
|
}], description: [{
|
|
@@ -3267,7 +3267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3267
3267
|
|
|
3268
3268
|
class PuroFaqsImgComponent {
|
|
3269
3269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroFaqsImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroFaqsImgComponent, isStandalone: true, selector: "lib-puro-faqs-img", inputs: { title: "title", imgs: "imgs", items: "items", applicationButton: "applicationButton", contactButton: "contactButton", tags: "tags", textColors: "textColors", view: "view" }, ngImport: i0, template: "<section\n class=\"faqsImg js-active-slider\"\n [puroSlider]=\"imgs\"\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=\"faqsImg__inner\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faqsImg__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\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=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"faqsImg__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n\n <div class=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n decoding=\"async\"\n class=\"faqsImg__sliderImage\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #faqContentTpl>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faq__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (items?.length) {\n <div class=\"faq__list\">\n @for (item of items; track $index) {\n <div class=\"faq__item\">\n <div\n class=\"faq__heading js-accordion\"\n role=\"button\"\n >\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n <span class=\"faq__icon\"\n ><i class=\"icon-6\"></i\n ></span>\n </div>\n @if (item.content) {\n <div class=\"faq__content\">\n <p>{{ item.content }}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <div class=\"btn__group\">\n @if (contactButton) {\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"contactButton.url\"\n [linkType]=\"contactButton.linkType\"\n [attr.aria-label]=\"contactButton.label\"\n >\n <span>{{ contactButton.label }}</span>\n </a>\n }\n @if (applicationButton) {\n <a\n class=\"btn btn__primary\"\n [href]=\"applicationButton.url\"\n [linkType]=\"applicationButton.linkType\"\n [attr.aria-label]=\"applicationButton.label\"\n >\n <span>{{ applicationButton.label }}</span>\n </a>\n }\n </div>\n </ng-template>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
3270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroFaqsImgComponent, isStandalone: true, selector: "lib-puro-faqs-img", inputs: { title: "title", imgs: "imgs", items: "items", applicationButton: "applicationButton", contactButton: "contactButton", tags: "tags", textColors: "textColors", view: "view" }, ngImport: i0, template: "<section\n class=\"faqsImg js-active-slider generalMargin\"\n [puroSlider]=\"imgs\"\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=\"faqsImg__inner\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faqsImg__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\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=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"faqsImg__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n\n <div class=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n decoding=\"async\"\n class=\"faqsImg__sliderImage\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #faqContentTpl>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faq__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (items?.length) {\n <div class=\"faq__list\">\n @for (item of items; track $index) {\n <div class=\"faq__item\">\n <div\n class=\"faq__heading js-accordion\"\n role=\"button\"\n >\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n <span class=\"faq__icon\"\n ><i class=\"icon-6\"></i\n ></span>\n </div>\n @if (item.content) {\n <div class=\"faq__content\">\n <p>{{ item.content }}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <div class=\"btn__group\">\n @if (contactButton) {\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"contactButton.url\"\n [linkType]=\"contactButton.linkType\"\n [attr.aria-label]=\"contactButton.label\"\n >\n <span>{{ contactButton.label }}</span>\n </a>\n }\n @if (applicationButton) {\n <a\n class=\"btn btn__primary\"\n [href]=\"applicationButton.url\"\n [linkType]=\"applicationButton.linkType\"\n [attr.aria-label]=\"applicationButton.label\"\n >\n <span>{{ applicationButton.label }}</span>\n </a>\n }\n </div>\n </ng-template>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { 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 }); }
|
|
3271
3271
|
}
|
|
3272
3272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroFaqsImgComponent, decorators: [{
|
|
3273
3273
|
type: Component,
|
|
@@ -3277,7 +3277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3277
3277
|
PuroSliderDirective,
|
|
3278
3278
|
PuroDynamicHeadingComponent,
|
|
3279
3279
|
NgOptimizedImage
|
|
3280
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"faqsImg js-active-slider\"\n [puroSlider]=\"imgs\"\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=\"faqsImg__inner\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faqsImg__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\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=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"faqsImg__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n\n <div class=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n decoding=\"async\"\n class=\"faqsImg__sliderImage\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #faqContentTpl>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faq__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (items?.length) {\n <div class=\"faq__list\">\n @for (item of items; track $index) {\n <div class=\"faq__item\">\n <div\n class=\"faq__heading js-accordion\"\n role=\"button\"\n >\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n <span class=\"faq__icon\"\n ><i class=\"icon-6\"></i\n ></span>\n </div>\n @if (item.content) {\n <div class=\"faq__content\">\n <p>{{ item.content }}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <div class=\"btn__group\">\n @if (contactButton) {\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"contactButton.url\"\n [linkType]=\"contactButton.linkType\"\n [attr.aria-label]=\"contactButton.label\"\n >\n <span>{{ contactButton.label }}</span>\n </a>\n }\n @if (applicationButton) {\n <a\n class=\"btn btn__primary\"\n [href]=\"applicationButton.url\"\n [linkType]=\"applicationButton.linkType\"\n [attr.aria-label]=\"applicationButton.label\"\n >\n <span>{{ applicationButton.label }}</span>\n </a>\n }\n </div>\n </ng-template>\n </div>\n</section>\n" }]
|
|
3280
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"faqsImg js-active-slider generalMargin\"\n [puroSlider]=\"imgs\"\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=\"faqsImg__inner\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faqsImg__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\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=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"faqsImg__sliderImage\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n </ng-template>\n\n <ng-template #rightSideTpl>\n <div class=\"faq__container\">\n <ng-container [ngTemplateOutlet]=\"faqContentTpl\"></ng-container>\n </div>\n\n <div class=\"faqsImg__imageSlider\">\n <div class=\"faqsImg__imageSlider--inner relative\">\n <div class=\"js-photo-slider faqsImg__slider\">\n @for (img of imgs; track $index) {\n <div class=\"faqsImg__sliderItem\">\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"960\"\n height=\"807\"\n decoding=\"async\"\n class=\"faqsImg__sliderImage\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #faqContentTpl>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"faq__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (items?.length) {\n <div class=\"faq__list\">\n @for (item of items; track $index) {\n <div class=\"faq__item\">\n <div\n class=\"faq__heading js-accordion\"\n role=\"button\"\n >\n @if (item.title) {\n <span>{{ item.title }}</span>\n }\n <span class=\"faq__icon\"\n ><i class=\"icon-6\"></i\n ></span>\n </div>\n @if (item.content) {\n <div class=\"faq__content\">\n <p>{{ item.content }}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n\n <div class=\"btn__group\">\n @if (contactButton) {\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"contactButton.url\"\n [linkType]=\"contactButton.linkType\"\n [attr.aria-label]=\"contactButton.label\"\n >\n <span>{{ contactButton.label }}</span>\n </a>\n }\n @if (applicationButton) {\n <a\n class=\"btn btn__primary\"\n [href]=\"applicationButton.url\"\n [linkType]=\"applicationButton.linkType\"\n [attr.aria-label]=\"applicationButton.label\"\n >\n <span>{{ applicationButton.label }}</span>\n </a>\n }\n </div>\n </ng-template>\n </div>\n</section>\n" }]
|
|
3281
3281
|
}], propDecorators: { title: [{
|
|
3282
3282
|
type: Input
|
|
3283
3283
|
}], imgs: [{
|
|
@@ -4854,17 +4854,20 @@ class MapperService {
|
|
|
4854
4854
|
}
|
|
4855
4855
|
mapEngineModal(props, engineMapped) {
|
|
4856
4856
|
return {
|
|
4857
|
-
titleAdvantages: typeof props?.texts?.
|
|
4858
|
-
? props?.texts?.
|
|
4859
|
-
: props?.texts?.
|
|
4857
|
+
titleAdvantages: typeof props?.texts?.advantagesTitle === 'string'
|
|
4858
|
+
? props?.texts?.advantagesTitle
|
|
4859
|
+
: props?.texts?.advantagesTitle?.contain,
|
|
4860
4860
|
tags: {
|
|
4861
|
-
title: props?.texts?.
|
|
4861
|
+
title: props?.texts?.advantagesTitle?.tag,
|
|
4862
4862
|
},
|
|
4863
4863
|
textColors: {
|
|
4864
|
-
title: props?.texts?.
|
|
4864
|
+
title: props?.texts?.advantagesTitle?.color?.trim(),
|
|
4865
4865
|
},
|
|
4866
4866
|
engine: engineMapped,
|
|
4867
|
-
advantages:
|
|
4867
|
+
advantages: props?.items?.map((item) => ({
|
|
4868
|
+
icon: item?.icon,
|
|
4869
|
+
title: item?.title,
|
|
4870
|
+
})),
|
|
4868
4871
|
};
|
|
4869
4872
|
}
|
|
4870
4873
|
mapWebmap(props) {
|
|
@@ -6296,7 +6299,7 @@ class PuroGalleryComponent {
|
|
|
6296
6299
|
});
|
|
6297
6300
|
}
|
|
6298
6301
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGalleryComponent, deps: [{ token: ModalStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGalleryComponent, isStandalone: true, selector: "lib-puro-gallery", inputs: { pretitle: "pretitle", title: "title", roomTitle: "roomTitle", filters: "filters", items: "items", button: "button", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"gallery gallery--withTabs\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"gallery__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"gallery__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (categoriesFilters()) {\n <ul class=\"gallery__tabs\">\n @for (option of categoriesFilters(); track $index) {\n <!-- Filtros normales -->\n @if (!option.rooms) {\n <li\n role=\"button\"\n class=\"js-filter-gallery\"\n [filterGallery]=\"option\"\n (filterSelect)=\"filterItems($event)\"\n [class.active]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.aria-selected]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.data-filter_category]=\"option.id\"\n [attr.aria-label]=\"option.text\"\n >\n {{ option.text }}\n </li>\n }\n\n <!-- Rooms: MISMO patr\u00F3n que languages -->\n @if (option.rooms) {\n <li\n class=\"js-active-modal\"\n activeModal\n data-modal_name=\"filter\"\n role=\"button\"\n (click)=\"prepareRoomsModal()\"\n [attr.aria-label]=\"option.text || 'Rooms'\"\n >\n {{ option.text }}\n </li>\n }\n }\n </ul>\n <!-- Categor\u00EDas (sin rooms ni room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"categoriesFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Categor\u00EDas</option>\n @for (option of categoriesFilters(); track $index) {\n @if (!option.rooms && !option.room) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n\n <!-- Habitaciones (room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"roomsFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Habitaciones</option>\n @for (option of roomsFilters(); track $index) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n <div class=\"gallery__list galleryGrid__for-7\">\n @if (itemsDisplayed()) {\n @for (item of itemsDisplayed(); track $index) {\n <div\n class=\"gallery__item show\"\n [attr.data-category]=\"item.filter\"\n [attr.data-title]=\"item.title\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n activeModal\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item.title ?? 'Gallery Item'\"\n [attr.data-img]=\"item.img?.src\"\n [attr.data-title]=\"item.title\"\n >\n <div class=\"gallery__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item.title\"\n fetchpriority=\"high\"\n priority\n />\n <div class=\"gallery__zoom\">\n <span>{{ item.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n puroLinkType\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroActiveModalDirective, selector: "[activeModal]" }, { kind: "directive", type: PuroFilterGalleryDirective, selector: "[filterGallery]", inputs: ["filterGallery"], outputs: ["filterSelect"] }, { 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 }); }
|
|
6302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGalleryComponent, isStandalone: true, selector: "lib-puro-gallery", inputs: { pretitle: "pretitle", title: "title", roomTitle: "roomTitle", filters: "filters", items: "items", button: "button", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"gallery gallery--withTabs generalMargin\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"gallery__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"gallery__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (categoriesFilters()) {\n <ul class=\"gallery__tabs\">\n @for (option of categoriesFilters(); track $index) {\n <!-- Filtros normales -->\n @if (!option.rooms) {\n <li\n role=\"button\"\n class=\"js-filter-gallery\"\n [filterGallery]=\"option\"\n (filterSelect)=\"filterItems($event)\"\n [class.active]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.aria-selected]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.data-filter_category]=\"option.id\"\n [attr.aria-label]=\"option.text\"\n >\n {{ option.text }}\n </li>\n }\n\n <!-- Rooms: MISMO patr\u00F3n que languages -->\n @if (option.rooms) {\n <li\n class=\"js-active-modal\"\n activeModal\n data-modal_name=\"filter\"\n role=\"button\"\n (click)=\"prepareRoomsModal()\"\n [attr.aria-label]=\"option.text || 'Rooms'\"\n >\n {{ option.text }}\n </li>\n }\n }\n </ul>\n <!-- Categor\u00EDas (sin rooms ni room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"categoriesFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Categor\u00EDas</option>\n @for (option of categoriesFilters(); track $index) {\n @if (!option.rooms && !option.room) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n\n <!-- Habitaciones (room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"roomsFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Habitaciones</option>\n @for (option of roomsFilters(); track $index) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n <div class=\"gallery__list galleryGrid__for-7\">\n @if (itemsDisplayed()) {\n @for (item of itemsDisplayed(); track $index) {\n <div\n class=\"gallery__item show\"\n [attr.data-category]=\"item.filter\"\n [attr.data-title]=\"item.title\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n activeModal\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item.title ?? 'Gallery Item'\"\n [attr.data-img]=\"item.img?.src\"\n [attr.data-title]=\"item.title\"\n >\n <div class=\"gallery__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item.title\"\n fetchpriority=\"high\"\n priority\n />\n <div class=\"gallery__zoom\">\n <span>{{ item.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n puroLinkType\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroActiveModalDirective, selector: "[activeModal]" }, { kind: "directive", type: PuroFilterGalleryDirective, selector: "[filterGallery]", inputs: ["filterGallery"], outputs: ["filterSelect"] }, { 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 }); }
|
|
6300
6303
|
}
|
|
6301
6304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGalleryComponent, decorators: [{
|
|
6302
6305
|
type: Component,
|
|
@@ -6307,7 +6310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6307
6310
|
PuroActiveModalDirective,
|
|
6308
6311
|
PuroFilterGalleryDirective,
|
|
6309
6312
|
NgOptimizedImage
|
|
6310
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"gallery gallery--withTabs\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"gallery__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"gallery__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (categoriesFilters()) {\n <ul class=\"gallery__tabs\">\n @for (option of categoriesFilters(); track $index) {\n <!-- Filtros normales -->\n @if (!option.rooms) {\n <li\n role=\"button\"\n class=\"js-filter-gallery\"\n [filterGallery]=\"option\"\n (filterSelect)=\"filterItems($event)\"\n [class.active]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.aria-selected]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.data-filter_category]=\"option.id\"\n [attr.aria-label]=\"option.text\"\n >\n {{ option.text }}\n </li>\n }\n\n <!-- Rooms: MISMO patr\u00F3n que languages -->\n @if (option.rooms) {\n <li\n class=\"js-active-modal\"\n activeModal\n data-modal_name=\"filter\"\n role=\"button\"\n (click)=\"prepareRoomsModal()\"\n [attr.aria-label]=\"option.text || 'Rooms'\"\n >\n {{ option.text }}\n </li>\n }\n }\n </ul>\n <!-- Categor\u00EDas (sin rooms ni room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"categoriesFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Categor\u00EDas</option>\n @for (option of categoriesFilters(); track $index) {\n @if (!option.rooms && !option.room) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n\n <!-- Habitaciones (room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"roomsFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Habitaciones</option>\n @for (option of roomsFilters(); track $index) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n <div class=\"gallery__list galleryGrid__for-7\">\n @if (itemsDisplayed()) {\n @for (item of itemsDisplayed(); track $index) {\n <div\n class=\"gallery__item show\"\n [attr.data-category]=\"item.filter\"\n [attr.data-title]=\"item.title\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n activeModal\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item.title ?? 'Gallery Item'\"\n [attr.data-img]=\"item.img?.src\"\n [attr.data-title]=\"item.title\"\n >\n <div class=\"gallery__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item.title\"\n fetchpriority=\"high\"\n priority\n />\n <div class=\"gallery__zoom\">\n <span>{{ item.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n puroLinkType\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n</section>\n" }]
|
|
6313
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"gallery gallery--withTabs generalMargin\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"gallery__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"gallery__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n\n @if (categoriesFilters()) {\n <ul class=\"gallery__tabs\">\n @for (option of categoriesFilters(); track $index) {\n <!-- Filtros normales -->\n @if (!option.rooms) {\n <li\n role=\"button\"\n class=\"js-filter-gallery\"\n [filterGallery]=\"option\"\n (filterSelect)=\"filterItems($event)\"\n [class.active]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.aria-selected]=\"\n !filterSelected()?.room &&\n (option.all\n ? !!filterSelected()?.all\n : filterSelected()?.id === option.id)\n \"\n [attr.data-filter_category]=\"option.id\"\n [attr.aria-label]=\"option.text\"\n >\n {{ option.text }}\n </li>\n }\n\n <!-- Rooms: MISMO patr\u00F3n que languages -->\n @if (option.rooms) {\n <li\n class=\"js-active-modal\"\n activeModal\n data-modal_name=\"filter\"\n role=\"button\"\n (click)=\"prepareRoomsModal()\"\n [attr.aria-label]=\"option.text || 'Rooms'\"\n >\n {{ option.text }}\n </li>\n }\n }\n </ul>\n <!-- Categor\u00EDas (sin rooms ni room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"categoriesFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Categor\u00EDas</option>\n @for (option of categoriesFilters(); track $index) {\n @if (!option.rooms && !option.room) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n\n <!-- Habitaciones (room:true) -->\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n [filterGallery]=\"roomsFilters()\"\n (filterSelect)=\"filterItems($event)\"\n >\n <option value=\"\" selected disabled>Habitaciones</option>\n @for (option of roomsFilters(); track $index) {\n <option [value]=\"option.id\">{{ option.text }}</option>\n }\n </select>\n <span class=\"icon-right\">\n <svg aria-hidden=\"true\" focusable=\"false\" width=\"15\" height=\"8\">\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n\n <div class=\"gallery__list galleryGrid__for-7\">\n @if (itemsDisplayed()) {\n @for (item of itemsDisplayed(); track $index) {\n <div\n class=\"gallery__item show\"\n [attr.data-category]=\"item.filter\"\n [attr.data-title]=\"item.title\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n activeModal\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item.title ?? 'Gallery Item'\"\n [attr.data-img]=\"item.img?.src\"\n [attr.data-title]=\"item.title\"\n >\n <div class=\"gallery__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item.title\"\n fetchpriority=\"high\"\n priority\n />\n <div class=\"gallery__zoom\">\n <span>{{ item.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n puroLinkType\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n</section>\n" }]
|
|
6311
6314
|
}], ctorParameters: () => [{ type: ModalStateService }], propDecorators: { pretitle: [{
|
|
6312
6315
|
type: Input
|
|
6313
6316
|
}], title: [{
|
|
@@ -6372,11 +6375,11 @@ class PuroGrid3colFilterComponent {
|
|
|
6372
6375
|
this.option.set(value);
|
|
6373
6376
|
}
|
|
6374
6377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colFilterComponent, isStandalone: true, selector: "lib-puro-grid3col-filter", inputs: { pretitle: "pretitle", title: "title", filter: "filter", items: "items", buttons: "buttons", backgroundImg: "backgroundImg" }, ngImport: i0, template: "<section class=\"discover discover--noRadius discover__list\" [style.--bg-url]=\"cssBgUrl\">\n <span class=\"discover__title\">{{ title }}</span>\n <div class=\"discover__container extended\">\n <div class=\"discover__headingSection\">\n <p class=\"discover__subHeading\">{{ pretitle }}</p>\n <h2 class=\"discover__heading\">{{ title }}</h2>\n @if (filter && filter.options) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n (change)=\"selectOption($event)\"\n [attr.aria-label]=\"filter.placeholder\"\n >\n <option [value]=\"0\" selected>{{ filter.placeholder }}</option>\n @for (option of filter.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"discover__list--inner\">\n @if (itemsDisplayed()?.length) {\n @for (item of itemsDisplayed(); track $index) {\n @if (item) {\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"item.button?.label ?? 'Item link'\"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n <p class=\"discover__subHeading\">\n {{ item.pretitle }}\n </p>\n <
|
|
6378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colFilterComponent, isStandalone: true, selector: "lib-puro-grid3col-filter", inputs: { pretitle: "pretitle", title: "title", filter: "filter", items: "items", buttons: "buttons", backgroundImg: "backgroundImg" }, ngImport: i0, template: "<section class=\"discover discover--noRadius discover__list generalMargin\" [style.--bg-url]=\"cssBgUrl\">\n <span class=\"discover__title\">{{ title }}</span>\n <div class=\"discover__container extended\">\n <div class=\"discover__headingSection\">\n <p class=\"discover__subHeading\">{{ pretitle }}</p>\n <h2 class=\"discover__heading\">{{ title }}</h2>\n @if (filter && filter.options) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n (change)=\"selectOption($event)\"\n [attr.aria-label]=\"filter.placeholder\"\n >\n <option [value]=\"0\" selected>{{ filter.placeholder }}</option>\n @for (option of filter.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"discover__list--inner\">\n @if (itemsDisplayed()?.length) {\n @for (item of itemsDisplayed(); track $index) {\n @if (item) {\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"item.button?.label ?? 'Item link'\"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n <h2 class=\"discover__heading photo\">\n {{ item.title }}\n </h2>\n </div>\n </div>\n <div class=\"btn__group\">\n <button class=\"btn btn__primary--outline\" [attr.aria-label]=\"item.button?.label ?? 'item button'\">\n <span>{{ item.button?.label }}</span>\n </button>\n </div>\n </a>\n }\n }\n }\n </div>\n @if (buttons?.length) {\n @for (button of buttons; track $index) {\n <div class=\"btn__group\">\n <a\n [href]=\"button?.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button?.linkType\"\n [attr.aria-label]=\"button?.label ?? 'Button'\"\n >\n <span>{{ button?.label }}</span>\n </a>\n </div>\n }\n }\n </div>\n</section>\n", styles: [".btn.btn__primary--outline:hover{background-color:var(--cl-text-white);color:var(--cl-title);border-color:var(--cl-text-white)}.discover__list:before{content:\"\";position:absolute;display:block;top:-11.5rem;left:-51.5rem;width:101.8rem;transform:scale(1) rotate(90deg);aspect-ratio:1;background:var(--bg-url) center center no-repeat;background-size:100%;opacity:.15}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6376
6379
|
}
|
|
6377
6380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colFilterComponent, decorators: [{
|
|
6378
6381
|
type: Component,
|
|
6379
|
-
args: [{ selector: 'lib-puro-grid3col-filter', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"discover discover--noRadius discover__list\" [style.--bg-url]=\"cssBgUrl\">\n <span class=\"discover__title\">{{ title }}</span>\n <div class=\"discover__container extended\">\n <div class=\"discover__headingSection\">\n <p class=\"discover__subHeading\">{{ pretitle }}</p>\n <h2 class=\"discover__heading\">{{ title }}</h2>\n @if (filter && filter.options) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n (change)=\"selectOption($event)\"\n [attr.aria-label]=\"filter.placeholder\"\n >\n <option [value]=\"0\" selected>{{ filter.placeholder }}</option>\n @for (option of filter.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"discover__list--inner\">\n @if (itemsDisplayed()?.length) {\n @for (item of itemsDisplayed(); track $index) {\n @if (item) {\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"item.button?.label ?? 'Item link'\"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n <p class=\"discover__subHeading\">\n {{ item.pretitle }}\n </p>\n <
|
|
6382
|
+
args: [{ selector: 'lib-puro-grid3col-filter', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"discover discover--noRadius discover__list generalMargin\" [style.--bg-url]=\"cssBgUrl\">\n <span class=\"discover__title\">{{ title }}</span>\n <div class=\"discover__container extended\">\n <div class=\"discover__headingSection\">\n <p class=\"discover__subHeading\">{{ pretitle }}</p>\n <h2 class=\"discover__heading\">{{ title }}</h2>\n @if (filter && filter.options) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n (change)=\"selectOption($event)\"\n [attr.aria-label]=\"filter.placeholder\"\n >\n <option [value]=\"0\" selected>{{ filter.placeholder }}</option>\n @for (option of filter.options; track $index) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"discover__list--inner\">\n @if (itemsDisplayed()?.length) {\n @for (item of itemsDisplayed(); track $index) {\n @if (item) {\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"item.button?.label ?? 'Item link'\"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n <h2 class=\"discover__heading photo\">\n {{ item.title }}\n </h2>\n </div>\n </div>\n <div class=\"btn__group\">\n <button class=\"btn btn__primary--outline\" [attr.aria-label]=\"item.button?.label ?? 'item button'\">\n <span>{{ item.button?.label }}</span>\n </button>\n </div>\n </a>\n }\n }\n }\n </div>\n @if (buttons?.length) {\n @for (button of buttons; track $index) {\n <div class=\"btn__group\">\n <a\n [href]=\"button?.url\"\n class=\"btn btn__primary--outline\"\n [linkType]=\"button?.linkType\"\n [attr.aria-label]=\"button?.label ?? 'Button'\"\n >\n <span>{{ button?.label }}</span>\n </a>\n </div>\n }\n }\n </div>\n</section>\n", styles: [".btn.btn__primary--outline:hover{background-color:var(--cl-text-white);color:var(--cl-title);border-color:var(--cl-text-white)}.discover__list:before{content:\"\";position:absolute;display:block;top:-11.5rem;left:-51.5rem;width:101.8rem;transform:scale(1) rotate(90deg);aspect-ratio:1;background:var(--bg-url) center center no-repeat;background-size:100%;opacity:.15}\n"] }]
|
|
6380
6383
|
}], propDecorators: { pretitle: [{
|
|
6381
6384
|
type: Input
|
|
6382
6385
|
}], title: [{
|
|
@@ -6450,7 +6453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6450
6453
|
|
|
6451
6454
|
class PuroGrid3colSliderComponent {
|
|
6452
6455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colSliderComponent, isStandalone: true, selector: "lib-puro-grid3col-slider", inputs: { title: "title", button: "button", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colSliderComponent, isStandalone: true, selector: "lib-puro-grid3col-slider", inputs: { title: "title", button: "button", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6454
6457
|
}
|
|
6455
6458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colSliderComponent, decorators: [{
|
|
6456
6459
|
type: Component,
|
|
@@ -6460,7 +6463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6460
6463
|
PuroLinkTypeDirective,
|
|
6461
6464
|
NgOptimizedImage,
|
|
6462
6465
|
PuroDynamicHeadingComponent,
|
|
6463
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n" }]
|
|
6466
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div>\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__box\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n <div\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n <div class=\"discover__content\">\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n ></h3>\n }\n </div>\n </div>\n @if (item.button) {\n <div class=\"btn__group\">\n <button\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"\n item.button.label ??\n 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </button>\n </div>\n }\n </a>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n</section>\n" }]
|
|
6464
6467
|
}], propDecorators: { title: [{
|
|
6465
6468
|
type: Input
|
|
6466
6469
|
}], button: [{
|
|
@@ -6475,7 +6478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6475
6478
|
|
|
6476
6479
|
class PuroGrid4itemsComponent {
|
|
6477
6480
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid4itemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid4itemsComponent, isStandalone: true, selector: "lib-puro-grid4items", inputs: { title: "title", items: "items", button: "button", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"imageGrid js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"imageGrid__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-4\">\n @for (item of items || []; track $index) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link ? item.link.url : ''\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">{{ item.title }}</h2>\n }\n @if (item.subtitle) {\n <
|
|
6481
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid4itemsComponent, isStandalone: true, selector: "lib-puro-grid4items", inputs: { title: "title", items: "items", button: "button", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"imageGrid__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-4\">\n @for (item of items || []; track $index) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link ? item.link.url : ''\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\">{{ item.title }}</h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n <div class=\"btn__group\">\n @if (item.link) {\n <button\n class=\"btn btn__secondary--outline\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <span>{{ item?.link?.label }}</span>\n </button>\n }\n </div>\n </div>\n </a>\n </div>\n }\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"imageGrid__mobile relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"imageGrid__box\">\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n width=\"499\"\n height=\"472\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <span class=\"imageGrid__subHeading\">{{\n item.subtitle\n }}</span>\n }\n </div>\n <div class=\"btn__group\">\n @if (item.link) {\n <a\n [linkType]=\"item.link.linkType\"\n [href]=\"item.link.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.link.label\"\n ><span>{{ item.link.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6479
6482
|
}
|
|
6480
6483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid4itemsComponent, decorators: [{
|
|
6481
6484
|
type: Component,
|
|
@@ -6485,7 +6488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6485
6488
|
PuroLinkTypeDirective,
|
|
6486
6489
|
NgOptimizedImage,
|
|
6487
6490
|
PuroDynamicHeadingComponent,
|
|
6488
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"imageGrid js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"imageGrid__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-4\">\n @for (item of items || []; track $index) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link ? item.link.url : ''\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">{{ item.title }}</h2>\n }\n @if (item.subtitle) {\n <
|
|
6491
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"imageGrid__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-4\">\n @for (item of items || []; track $index) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link ? item.link.url : ''\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\">{{ item.title }}</h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n <div class=\"btn__group\">\n @if (item.link) {\n <button\n class=\"btn btn__secondary--outline\"\n [attr.aria-label]=\"item?.link?.label\"\n >\n <span>{{ item?.link?.label }}</span>\n </button>\n }\n </div>\n </div>\n </a>\n </div>\n }\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"imageGrid__mobile relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"imageGrid__box\">\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n width=\"499\"\n height=\"472\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <span class=\"imageGrid__subHeading\">{{\n item.subtitle\n }}</span>\n }\n </div>\n <div class=\"btn__group\">\n @if (item.link) {\n <a\n [linkType]=\"item.link.linkType\"\n [href]=\"item.link.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.link.label\"\n ><span>{{ item.link.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n</section>\n" }]
|
|
6489
6492
|
}], propDecorators: { title: [{
|
|
6490
6493
|
type: Input
|
|
6491
6494
|
}], items: [{
|
|
@@ -6503,11 +6506,11 @@ class PuroGrid5itemsComponent {
|
|
|
6503
6506
|
this.items = input();
|
|
6504
6507
|
}
|
|
6505
6508
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid5itemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid5itemsComponent, isStandalone: true, selector: "lib-puro-grid5items", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items()\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-5\">\n @for (item of items(); track $index) {\n @if (item) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link?.url\"\n [linkType]=\"item.link?.linkType\"\n class=\"imageGrid__box\"\n [ngClass]=\"{ 'imageGrid__box--right': $last }\"\n [attr.aria-label]=\"item.link?.label ?? 'Item link'\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n priority\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <
|
|
6509
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid5itemsComponent, isStandalone: true, selector: "lib-puro-grid5items", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items()\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-5\">\n @for (item of items(); track $index) {\n @if (item) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link?.url\"\n [linkType]=\"item.link?.linkType\"\n class=\"imageGrid__box\"\n [ngClass]=\"{ 'imageGrid__box--right': $last }\"\n [attr.aria-label]=\"item.link?.label ?? 'Item link'\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n priority\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n <div class=\"btn__group\">\n @if (item.link) {\n <button\n class=\"btn btn__secondary--outline\"\n [attr.aria-label]=\"item.link.label\"\n >\n <span>{{ item.link.label }}</span>\n </button>\n }\n </div>\n </div>\n </a>\n </div>\n }\n }\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"imageGrid__mobile relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items(); track $index) {\n @if (item) {\n <div>\n <div class=\"imageGrid__box\">\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n width=\"499\"\n height=\"472\"\n [alt]=\"item.img.alt\"\n priority\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <span class=\"imageGrid__subHeading\">{{\n item.subtitle\n }}</span>\n }\n </div>\n <div class=\"btn__group\">\n @if (item.link) {\n <a\n [linkType]=\"item.link.linkType\"\n [href]=\"item.link.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.link.label\"\n ><span>{{ item.link.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
6507
6510
|
}
|
|
6508
6511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid5itemsComponent, decorators: [{
|
|
6509
6512
|
type: Component,
|
|
6510
|
-
args: [{ selector: 'lib-puro-grid5items', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items()\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-5\">\n @for (item of items(); track $index) {\n @if (item) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link?.url\"\n [linkType]=\"item.link?.linkType\"\n class=\"imageGrid__box\"\n [ngClass]=\"{ 'imageGrid__box--right': $last }\"\n [attr.aria-label]=\"item.link?.label ?? 'Item link'\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n priority\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <
|
|
6513
|
+
args: [{ selector: 'lib-puro-grid5items', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], template: "<section\n class=\"imageGrid js-active-slider generalMargin\"\n [puroSlider]=\"items()\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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 @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"imageGrid__desktop imageGrid__for-5\">\n @for (item of items(); track $index) {\n @if (item) {\n <div class=\"imageGrid__item\">\n <a\n [href]=\"item.link?.url\"\n [linkType]=\"item.link?.linkType\"\n class=\"imageGrid__box\"\n [ngClass]=\"{ 'imageGrid__box--right': $last }\"\n [attr.aria-label]=\"item.link?.label ?? 'Item link'\"\n >\n <div class=\"imageGrid__graphic\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n priority\n width=\"360\"\n height=\"340\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n <div class=\"btn__group\">\n @if (item.link) {\n <button\n class=\"btn btn__secondary--outline\"\n [attr.aria-label]=\"item.link.label\"\n >\n <span>{{ item.link.label }}</span>\n </button>\n }\n </div>\n </div>\n </a>\n </div>\n }\n }\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"imageGrid__mobile relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items(); track $index) {\n @if (item) {\n <div>\n <div class=\"imageGrid__box\">\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n width=\"499\"\n height=\"472\"\n [alt]=\"item.img.alt\"\n priority\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\">\n {{ item.title }}\n </h2>\n }\n @if (item.subtitle) {\n <span class=\"imageGrid__subHeading\">{{\n item.subtitle\n }}</span>\n }\n </div>\n <div class=\"btn__group\">\n @if (item.link) {\n <a\n [linkType]=\"item.link.linkType\"\n [href]=\"item.link.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.link.label\"\n ><span>{{ item.link.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n }\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n</section>\n" }]
|
|
6511
6514
|
}], propDecorators: { title: [{
|
|
6512
6515
|
type: Input
|
|
6513
6516
|
}], button: [{
|
|
@@ -6516,11 +6519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6516
6519
|
|
|
6517
6520
|
class PuroGrid6itemsComponent {
|
|
6518
6521
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid6itemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid6itemsComponent, isStandalone: true, selector: "lib-puro-grid6items", inputs: { title: "title", items: "items", button: "button" }, ngImport: i0, template: "<section\n class=\"gallery js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-gallery-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 @if (title) {\n <span class=\"gallery__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"gallery__desktop galleryGrid__for-6\">\n @for (item of items || []; track $index) {\n <div\n class=\"gallery__item\"\n id=\"gallery{{ $index }}\"\n data-category=\"habitaciones\"\n attr.data-img=\"{{ item?.img?.src }}\"\n data-title=\"{{ item?.title }}\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item?.title ?? 'Gallery Item'\"\n >\n <div class=\"gallery__graphic\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item?.img?.alt\" \n decoding=\"async\"\n />\n }\n <div class=\"gallery__zoom\">\n <span>{{ item?.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"gallery__mobile relative\">\n <div class=\"js-gallery-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"gallery__box\">\n <div class=\"gallery__graphic js-slider_fix-arrows-zone\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n class=\"gallery__graphic--img\"\n width=\"532\"\n height=\"503\"\n [alt]=\"item?.img?.alt\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
6522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid6itemsComponent, isStandalone: true, selector: "lib-puro-grid6items", inputs: { title: "title", items: "items", button: "button" }, ngImport: i0, template: "<section\n class=\"gallery js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-gallery-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 @if (title) {\n <span class=\"gallery__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"gallery__desktop galleryGrid__for-6\">\n @for (item of items || []; track $index) {\n <div\n class=\"gallery__item\"\n id=\"gallery{{ $index }}\"\n data-category=\"habitaciones\"\n attr.data-img=\"{{ item?.img?.src }}\"\n data-title=\"{{ item?.title }}\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item?.title ?? 'Gallery Item'\"\n >\n <div class=\"gallery__graphic\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item?.img?.alt\" \n decoding=\"async\"\n />\n }\n <div class=\"gallery__zoom\">\n <span>{{ item?.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"gallery__mobile relative\">\n <div class=\"js-gallery-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"gallery__box\">\n <div class=\"gallery__graphic js-slider_fix-arrows-zone\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n class=\"gallery__graphic--img\"\n width=\"532\"\n height=\"503\"\n [alt]=\"item?.img?.alt\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
6520
6523
|
}
|
|
6521
6524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid6itemsComponent, decorators: [{
|
|
6522
6525
|
type: Component,
|
|
6523
|
-
args: [{ selector: 'lib-puro-grid6items', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"gallery js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-gallery-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 @if (title) {\n <span class=\"gallery__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"gallery__desktop galleryGrid__for-6\">\n @for (item of items || []; track $index) {\n <div\n class=\"gallery__item\"\n id=\"gallery{{ $index }}\"\n data-category=\"habitaciones\"\n attr.data-img=\"{{ item?.img?.src }}\"\n data-title=\"{{ item?.title }}\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item?.title ?? 'Gallery Item'\"\n >\n <div class=\"gallery__graphic\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item?.img?.alt\" \n decoding=\"async\"\n />\n }\n <div class=\"gallery__zoom\">\n <span>{{ item?.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"gallery__mobile relative\">\n <div class=\"js-gallery-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"gallery__box\">\n <div class=\"gallery__graphic js-slider_fix-arrows-zone\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n class=\"gallery__graphic--img\"\n width=\"532\"\n height=\"503\"\n [alt]=\"item?.img?.alt\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n</section>\n" }]
|
|
6526
|
+
args: [{ selector: 'lib-puro-grid6items', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"gallery js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-gallery-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 @if (title) {\n <span class=\"gallery__title\">{{ title }}</span>\n }\n <!-- desktop view S -->\n <div class=\"gallery__desktop galleryGrid__for-6\">\n @for (item of items || []; track $index) {\n <div\n class=\"gallery__item\"\n id=\"gallery{{ $index }}\"\n data-category=\"habitaciones\"\n attr.data-img=\"{{ item?.img?.src }}\"\n data-title=\"{{ item?.title }}\"\n >\n <div\n role=\"button\"\n class=\"gallery__box js-active-modal\"\n data-modal_name=\"gallery\"\n [attr.aria-label]=\"item?.title ?? 'Gallery Item'\"\n >\n <div class=\"gallery__graphic\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n width=\"789\"\n height=\"747\"\n class=\"gallery__graphic--img\"\n [alt]=\"item?.img?.alt\" \n decoding=\"async\"\n />\n }\n <div class=\"gallery__zoom\">\n <span>{{ item?.title }}</span>\n <i class=\"icon-84\"></i>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <!-- desktop view E -->\n <!-- mobile view S -->\n <div class=\"gallery__mobile relative\">\n <div class=\"js-gallery-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"gallery__box\">\n <div class=\"gallery__graphic js-slider_fix-arrows-zone\">\n @if (item?.img) {\n <img\n [ngSrc]=\"item?.img!.src\"\n class=\"gallery__graphic--img\"\n width=\"532\"\n height=\"503\"\n [alt]=\"item?.img?.alt\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <!-- mobile view E -->\n\n <div class=\"btn__group\">\n @if (button) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n }\n </div>\n</section>\n" }]
|
|
6524
6527
|
}], propDecorators: { title: [{
|
|
6525
6528
|
type: Input
|
|
6526
6529
|
}], items: [{
|
|
@@ -6927,11 +6930,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6927
6930
|
|
|
6928
6931
|
class PuroInfoBannerComponent {
|
|
6929
6932
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6930
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoBannerComponent, isStandalone: true, selector: "lib-puro-info-banner", inputs: { items: "items", title: "title" }, ngImport: i0, template: "<section\n class=\"largeImage js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-largeImage-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 @if (title) {\n <span class=\"largeImage__title\">{{ title }}</span>\n }\n <div class=\"largeImage__inner relative\">\n <div class=\"js-largeImage-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"largeImage__box\">\n <div\n class=\"largeImage__graphic js-slider_fix-arrows-zone desktop\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"largeImage__content\">\n @if (item.title) {\n <h2\n class=\"largeImage__heading js-slider_fix-arrows-zone mobile\"\n >\n {{ item.title }}\n </h2>\n }\n @if (item.description) {\n <div class=\"largeImage__paragraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.button) {\n <a\n [linkType]=\"item.button.linkType\"\n [href]=\"item.button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.button.label\"\n ><span>{{ item.button.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
6933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoBannerComponent, isStandalone: true, selector: "lib-puro-info-banner", inputs: { items: "items", title: "title" }, ngImport: i0, template: "<section\n class=\"largeImage js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-largeImage-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 @if (title) {\n <span class=\"largeImage__title\">{{ title }}</span>\n }\n <div class=\"largeImage__inner relative\">\n <div class=\"js-largeImage-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"largeImage__box\">\n <div\n class=\"largeImage__graphic js-slider_fix-arrows-zone desktop\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"largeImage__content\">\n @if (item.title) {\n <h2\n class=\"largeImage__heading js-slider_fix-arrows-zone mobile\"\n >\n {{ item.title }}\n </h2>\n }\n @if (item.description) {\n <div class=\"largeImage__paragraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.button) {\n <a\n [linkType]=\"item.button.linkType\"\n [href]=\"item.button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.button.label\"\n ><span>{{ item.button.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
6931
6934
|
}
|
|
6932
6935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoBannerComponent, decorators: [{
|
|
6933
6936
|
type: Component,
|
|
6934
|
-
args: [{ selector: 'lib-puro-info-banner', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"largeImage js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-largeImage-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 @if (title) {\n <span class=\"largeImage__title\">{{ title }}</span>\n }\n <div class=\"largeImage__inner relative\">\n <div class=\"js-largeImage-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"largeImage__box\">\n <div\n class=\"largeImage__graphic js-slider_fix-arrows-zone desktop\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"largeImage__content\">\n @if (item.title) {\n <h2\n class=\"largeImage__heading js-slider_fix-arrows-zone mobile\"\n >\n {{ item.title }}\n </h2>\n }\n @if (item.description) {\n <div class=\"largeImage__paragraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.button) {\n <a\n [linkType]=\"item.button.linkType\"\n [href]=\"item.button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.button.label\"\n ><span>{{ item.button.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n" }]
|
|
6937
|
+
args: [{ selector: 'lib-puro-info-banner', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"largeImage js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-largeImage-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 @if (title) {\n <span class=\"largeImage__title\">{{ title }}</span>\n }\n <div class=\"largeImage__inner relative\">\n <div class=\"js-largeImage-slider js-slider_fix-arrows\">\n @for (item of items || []; track $index) {\n <div>\n <div class=\"largeImage__box\">\n <div\n class=\"largeImage__graphic js-slider_fix-arrows-zone desktop\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n width=\"1670\"\n height=\"704\"\n class=\"largeImage__graphic--img\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"largeImage__content\">\n @if (item.title) {\n <h2\n class=\"largeImage__heading js-slider_fix-arrows-zone mobile\"\n >\n {{ item.title }}\n </h2>\n }\n @if (item.description) {\n <div class=\"largeImage__paragraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.button) {\n <a\n [linkType]=\"item.button.linkType\"\n [href]=\"item.button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"item.button.label\"\n ><span>{{ item.button.label }}</span></a\n >\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n" }]
|
|
6935
6938
|
}], propDecorators: { items: [{
|
|
6936
6939
|
type: Input
|
|
6937
6940
|
}], title: [{
|
|
@@ -7140,11 +7143,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7140
7143
|
|
|
7141
7144
|
class PuroInfoServicesComponent {
|
|
7142
7145
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoServicesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7143
|
-
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\"\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 <h3 class=\"equipments__listItem--heading\">\n {{ item.title }}\n </h3>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem--text\">\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 }); }
|
|
7146
|
+
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 <h3 class=\"equipments__listItem--heading\">\n {{ item.title }}\n </h3>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem--text\">\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 }); }
|
|
7144
7147
|
}
|
|
7145
7148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoServicesComponent, decorators: [{
|
|
7146
7149
|
type: Component,
|
|
7147
|
-
args: [{ selector: 'lib-puro-info-services', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"equipments js-active-slider\"\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 <h3 class=\"equipments__listItem--heading\">\n {{ item.title }}\n </h3>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem--text\">\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" }]
|
|
7150
|
+
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 <h3 class=\"equipments__listItem--heading\">\n {{ item.title }}\n </h3>\n }\n @if (item.subtitle) {\n <p class=\"equipments__listItem--text\">\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" }]
|
|
7148
7151
|
}], propDecorators: { title: [{
|
|
7149
7152
|
type: Input
|
|
7150
7153
|
}], images: [{
|
|
@@ -7334,11 +7337,11 @@ class PuroListGeneralComponent {
|
|
|
7334
7337
|
this.rightSide = false;
|
|
7335
7338
|
}
|
|
7336
7339
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroListGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7337
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroListGeneralComponent, isStandalone: true, selector: "lib-puro-list-general", inputs: { title: "title", items: "items", rightSide: "rightSide" }, ngImport: i0, template: "<section class=\"suites suites__list\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n [ngClass]=\"{ 'image--right': $odd }\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 <ng-container\n *ngIf=\"rightSide; else leftSide\"\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n <ng-template #leftSide>\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n </ng-template>\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: ["svg{background-color:var(--cl-title);max-height:unset!important}.suites__slider{row-gap:2rem;flex-wrap:wrap}.suites__service{flex:1 0 33.3333333333%}@media (max-width: 480px){.suites_service+.suites_service:nth-child(2n):before{display:none}}@media (min-width: 480px) and (max-width: 1024px){.suites_service+.suites_service:nth-child(3n):before{display:none}}@media (min-width: 1024px) and (max-width: 1680px){.suites_service+.suites_service:nth-child(odd):before{display:none}}@media (min-width: 1680px){.suites_service+.suites_service:nth-child(3n):before{display:none}}.suites__logo{display:inline-flex;align-items:center;justify-content:center;--logo-h: clamp(32px, 4vw, 64px);height:var(--logo-h);margin-bottom:clamp(16px,2vw,24px)}@media (min-width: 1024px){.suites__logo{justify-content:flex-start}}.suites__logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;transition:transform .3s ease}.suites__logo:hover img{transform:scale(1.1)}.suites__logo+.suites__heading{display:none}.suites--on-dark .suites__logo img{filter:brightness(0) invert(1)}\n"], 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 }); }
|
|
7340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroListGeneralComponent, isStandalone: true, selector: "lib-puro-list-general", inputs: { title: "title", items: "items", rightSide: "rightSide" }, ngImport: i0, template: "<section class=\"suites suites__list generalMargin\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n [ngClass]=\"{ 'image--right': $odd }\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 <ng-container\n *ngIf=\"rightSide; else leftSide\"\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n <ng-template #leftSide>\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n </ng-template>\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: ["svg{background-color:var(--cl-title);max-height:unset!important}.suites__slider{row-gap:2rem;flex-wrap:wrap}.suites__service{flex:1 0 33.3333333333%}@media (max-width: 480px){.suites_service+.suites_service:nth-child(2n):before{display:none}}@media (min-width: 480px) and (max-width: 1024px){.suites_service+.suites_service:nth-child(3n):before{display:none}}@media (min-width: 1024px) and (max-width: 1680px){.suites_service+.suites_service:nth-child(odd):before{display:none}}@media (min-width: 1680px){.suites_service+.suites_service:nth-child(3n):before{display:none}}.suites__logo{display:inline-flex;align-items:center;justify-content:center;--logo-h: clamp(32px, 4vw, 64px);height:var(--logo-h);margin-bottom:clamp(16px,2vw,24px)}@media (min-width: 1024px){.suites__logo{justify-content:flex-start}}.suites__logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;transition:transform .3s ease}.suites__logo:hover img{transform:scale(1.1)}.suites__logo+.suites__heading{display:none}.suites--on-dark .suites__logo img{filter:brightness(0) invert(1)}\n"], 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 }); }
|
|
7338
7341
|
}
|
|
7339
7342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroListGeneralComponent, decorators: [{
|
|
7340
7343
|
type: Component,
|
|
7341
|
-
args: [{ selector: 'lib-puro-list-general', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites suites__list\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n [ngClass]=\"{ 'image--right': $odd }\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 <ng-container\n *ngIf=\"rightSide; else leftSide\"\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n <ng-template #leftSide>\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n </ng-template>\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: ["svg{background-color:var(--cl-title);max-height:unset!important}.suites__slider{row-gap:2rem;flex-wrap:wrap}.suites__service{flex:1 0 33.3333333333%}@media (max-width: 480px){.suites_service+.suites_service:nth-child(2n):before{display:none}}@media (min-width: 480px) and (max-width: 1024px){.suites_service+.suites_service:nth-child(3n):before{display:none}}@media (min-width: 1024px) and (max-width: 1680px){.suites_service+.suites_service:nth-child(odd):before{display:none}}@media (min-width: 1680px){.suites_service+.suites_service:nth-child(3n):before{display:none}}.suites__logo{display:inline-flex;align-items:center;justify-content:center;--logo-h: clamp(32px, 4vw, 64px);height:var(--logo-h);margin-bottom:clamp(16px,2vw,24px)}@media (min-width: 1024px){.suites__logo{justify-content:flex-start}}.suites__logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;transition:transform .3s ease}.suites__logo:hover img{transform:scale(1.1)}.suites__logo+.suites__heading{display:none}.suites--on-dark .suites__logo img{filter:brightness(0) invert(1)}\n"] }]
|
|
7344
|
+
args: [{ selector: 'lib-puro-list-general', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites suites__list generalMargin\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n [ngClass]=\"{ 'image--right': $odd }\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 <ng-container\n *ngIf=\"rightSide; else leftSide\"\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n <ng-template #leftSide>\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n </ng-template>\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n btn__primary: $index === 0,\n 'btn__primary--outline': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: ["svg{background-color:var(--cl-title);max-height:unset!important}.suites__slider{row-gap:2rem;flex-wrap:wrap}.suites__service{flex:1 0 33.3333333333%}@media (max-width: 480px){.suites_service+.suites_service:nth-child(2n):before{display:none}}@media (min-width: 480px) and (max-width: 1024px){.suites_service+.suites_service:nth-child(3n):before{display:none}}@media (min-width: 1024px) and (max-width: 1680px){.suites_service+.suites_service:nth-child(odd):before{display:none}}@media (min-width: 1680px){.suites_service+.suites_service:nth-child(3n):before{display:none}}.suites__logo{display:inline-flex;align-items:center;justify-content:center;--logo-h: clamp(32px, 4vw, 64px);height:var(--logo-h);margin-bottom:clamp(16px,2vw,24px)}@media (min-width: 1024px){.suites__logo{justify-content:flex-start}}.suites__logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;image-rendering:-webkit-optimize-contrast;transition:transform .3s ease}.suites__logo:hover img{transform:scale(1.1)}.suites__logo+.suites__heading{display:none}.suites--on-dark .suites__logo img{filter:brightness(0) invert(1)}\n"] }]
|
|
7342
7345
|
}], propDecorators: { title: [{
|
|
7343
7346
|
type: Input
|
|
7344
7347
|
}], items: [{
|
|
@@ -7365,11 +7368,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7365
7368
|
|
|
7366
7369
|
class PuroListRestaurantsComponent {
|
|
7367
7370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroListRestaurantsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroListRestaurantsComponent, isStandalone: true, selector: "lib-puro-list-restaurants", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<section class=\"suites suites__list\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 @if ($even) {\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: [":host .suites__list .suites__graphic{max-height:580px;overflow:hidden}:host .suites__list .suites__graphic .js-photo-slider,:host .suites__list .suites__graphic .slick-list,:host .suites__list .suites__graphic .slick-track,:host .suites__list .suites__graphic .slick-slide>div{height:100%}:host .suites__list .suites__graphic .suites__graphic--img{width:100%;height:100%;object-fit:cover}:host .suites__list .suites__logo img{width:40%;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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 }); }
|
|
7371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroListRestaurantsComponent, isStandalone: true, selector: "lib-puro-list-restaurants", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<section class=\"suites suites__list generalMargin\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 @if ($even) {\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: [":host .suites__list .suites__graphic{max-height:580px;overflow:hidden}:host .suites__list .suites__graphic .js-photo-slider,:host .suites__list .suites__graphic .slick-list,:host .suites__list .suites__graphic .slick-track,:host .suites__list .suites__graphic .slick-slide>div{height:100%}:host .suites__list .suites__graphic .suites__graphic--img{width:100%;height:100%;object-fit:cover}:host .suites__list .suites__logo img{width:40%;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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 }); }
|
|
7369
7372
|
}
|
|
7370
7373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroListRestaurantsComponent, decorators: [{
|
|
7371
7374
|
type: Component,
|
|
7372
|
-
args: [{ selector: 'lib-puro-list-restaurants', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites suites__list\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 @if ($even) {\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: [":host .suites__list .suites__graphic{max-height:580px;overflow:hidden}:host .suites__list .suites__graphic .js-photo-slider,:host .suites__list .suites__graphic .slick-list,:host .suites__list .suites__graphic .slick-track,:host .suites__list .suites__graphic .slick-slide>div{height:100%}:host .suites__list .suites__graphic .suites__graphic--img{width:100%;height:100%;object-fit:cover}:host .suites__list .suites__logo img{width:40%;height:auto}\n"] }]
|
|
7375
|
+
args: [{ selector: 'lib-puro-list-restaurants', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"suites suites__list generalMargin\">\n @if (title) {\n <span class=\"suites__title\">{{ title }}</span>\n }\n\n <div class=\"suites__container\">\n @for (item of items; track $index) {\n <div\n class=\"suites__item js-active-slider\"\n data-slides_infinite=\"true\"\n [puroSlider]=\"items\"\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 @if ($even) {\n <ng-container\n [ngTemplateOutlet]=\"leftSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"rightSideTpl\"\n [ngTemplateOutletContext]=\"{ item: item }\"\n ></ng-container>\n }\n </div>\n }\n </div>\n</section>\n\n<ng-template #leftSideTpl let-item=\"item\">\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #rightSideTpl let-item=\"item\">\n <div class=\"suites__content\">\n <div>\n @if (item.logo) {\n <div class=\"suites__logo\">\n <img\n [ngSrc]=\"item.logo.src\"\n decoding=\"async\"\n width=\"150\"\n height=\"50\"\n [alt]=\"item.logo.alt\"\n loading=\"lazy\"\n />\n </div>\n } @else {\n @if (item.title) {\n <h2 class=\"suites__heading\">{{ item.title }}</h2>\n }\n }\n <div class=\"suites__slider withOutSlider\">\n @for (equipment of item.equipment; track $index) {\n <div class=\"suites__service\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"50\"\n height=\"40\"\n [ngClass]=\"equipment.icon\"\n ></svg>\n <span>{{ equipment.text }}</span>\n </div>\n }\n </div>\n @if (item.description) {\n <div class=\"suites__paragraph\">\n <p [innerHTML]=\"item.description\"></p>\n </div>\n }\n <div class=\"btn__group\">\n @for (button of item.buttons[0]; track $index) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $index === 0,\n 'btn__primary': $index === 1,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n <div class=\"suites__graphic relative\">\n <div class=\"js-photo-slider h-100\">\n @for (image of item.images; track $index) {\n <div class=\"h-100\">\n <img\n [ngSrc]=\"image.src\"\n decoding=\"async\"\n width=\"789\"\n class=\"suites__graphic--img\"\n height=\"748\"\n [alt]=\"image.alt\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</ng-template>\n", styles: [":host .suites__list .suites__graphic{max-height:580px;overflow:hidden}:host .suites__list .suites__graphic .js-photo-slider,:host .suites__list .suites__graphic .slick-list,:host .suites__list .suites__graphic .slick-track,:host .suites__list .suites__graphic .slick-slide>div{height:100%}:host .suites__list .suites__graphic .suites__graphic--img{width:100%;height:100%;object-fit:cover}:host .suites__list .suites__logo img{width:40%;height:auto}\n"] }]
|
|
7373
7376
|
}], propDecorators: { title: [{
|
|
7374
7377
|
type: Input
|
|
7375
7378
|
}], items: [{
|
|
@@ -7384,11 +7387,11 @@ class PuroMapListComponent {
|
|
|
7384
7387
|
this.selected.set(this.selected() === item ? undefined : item);
|
|
7385
7388
|
}
|
|
7386
7389
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroMapListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7387
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroMapListComponent, isStandalone: true, selector: "lib-puro-map-list", inputs: { mapImage: "mapImage", title: "title", pretitle: "pretitle", ndTitle: "ndTitle", description: "description", ndDescription: "ndDescription", subtitle: "subtitle", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"map\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"map__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"map__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"map__paragraph\">\n <p>\n {{ description }}\n </p>\n @if (ndDescription) {\n <p>\n {{ ndDescription }}\n </p>\n }\n </div>\n }\n <div class=\"map__inner\">\n <div class=\"mapPoints\">\n <div class=\"mapPoints__inner\">\n <div class=\"mapPoints__headingSection\">\n @if (ndTitle) {\n <h3 class=\"mapPoints__heading\">\n {{ ndTitle }}\n </h3>\n }\n @if (subtitle) {\n <p class=\"mapPoints__subHeading\">{{ subtitle }}</p>\n }\n </div>\n @if (items) {\n <ul class=\"mapPoints__list\">\n @for (item of items; track $index) {\n <li\n class=\"mapPoints__item\"\n [ngClass]=\"{ active: selected() === item }\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"mapPoints__itemHeading\">\n <span>{{ $index + 1 }}</span>\n <p>{{ item.title }}</p>\n <i class=\"icon icon-91\"></i>\n </div>\n <div class=\"mapPoints__itemContent\">\n <div class=\"mapPoints__itemGraphic\">\n @if (item.image) {\n <img\n [ngSrc]=\"item.image.src\"\n decoding=\"async\"\n class=\"mapPoints__itemGraphic--img\"\n width=\"420\"\n height=\"320\"\n [alt]=\"item.title\"\n />\n }\n </div>\n <div class=\"mapPoints__itemParagraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n <div class=\"mapLocation\">\n <div class=\"mapLocation__inner\">\n @if (mapImage) {\n <img\n class=\"mapLocation__bigMap\"\n [ngSrc]=\"mapImage.src\"\n decoding=\"async\"\n width=\"1240\"\n height=\"1030\"\n [alt]=\"mapImage.alt\"\n />\n }\n\n @if (items) {\n @for (item of items; track $index) {\n @if (item.mapImage) {\n <img\n class=\"mapLocation__smallMap\"\n [ngClass]=\"{ active: selected() === item }\"\n [ngSrc]=\"item.mapImage.src\"\n decoding=\"async\"\n width=\"1100\"\n height=\"910\"\n [alt]=\"item.title\"\n />\n }\n }\n }\n </div>\n </div>\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: 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 }); }
|
|
7390
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroMapListComponent, isStandalone: true, selector: "lib-puro-map-list", inputs: { mapImage: "mapImage", title: "title", pretitle: "pretitle", ndTitle: "ndTitle", description: "description", ndDescription: "ndDescription", subtitle: "subtitle", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"map generalMargin\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"map__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"map__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"map__paragraph\">\n <p>\n {{ description }}\n </p>\n @if (ndDescription) {\n <p>\n {{ ndDescription }}\n </p>\n }\n </div>\n }\n <div class=\"map__inner\">\n <div class=\"mapPoints\">\n <div class=\"mapPoints__inner\">\n <div class=\"mapPoints__headingSection\">\n @if (ndTitle) {\n <h3 class=\"mapPoints__heading\">\n {{ ndTitle }}\n </h3>\n }\n @if (subtitle) {\n <p class=\"mapPoints__subHeading\">{{ subtitle }}</p>\n }\n </div>\n @if (items) {\n <ul class=\"mapPoints__list\">\n @for (item of items; track $index) {\n <li\n class=\"mapPoints__item\"\n [ngClass]=\"{ active: selected() === item }\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"mapPoints__itemHeading\">\n <span>{{ $index + 1 }}</span>\n <p>{{ item.title }}</p>\n <i class=\"icon icon-91\"></i>\n </div>\n <div class=\"mapPoints__itemContent\">\n <div class=\"mapPoints__itemGraphic\">\n @if (item.image) {\n <img\n [ngSrc]=\"item.image.src\"\n decoding=\"async\"\n class=\"mapPoints__itemGraphic--img\"\n width=\"420\"\n height=\"320\"\n [alt]=\"item.title\"\n />\n }\n </div>\n <div class=\"mapPoints__itemParagraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n <div class=\"mapLocation\">\n <div class=\"mapLocation__inner\">\n @if (mapImage) {\n <img\n class=\"mapLocation__bigMap\"\n [ngSrc]=\"mapImage.src\"\n decoding=\"async\"\n width=\"1240\"\n height=\"1030\"\n [alt]=\"mapImage.alt\"\n />\n }\n\n @if (items) {\n @for (item of items; track $index) {\n @if (item.mapImage) {\n <img\n class=\"mapLocation__smallMap\"\n [ngClass]=\"{ active: selected() === item }\"\n [ngSrc]=\"item.mapImage.src\"\n decoding=\"async\"\n width=\"1100\"\n height=\"910\"\n [alt]=\"item.title\"\n />\n }\n }\n }\n </div>\n </div>\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: 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 }); }
|
|
7388
7391
|
}
|
|
7389
7392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroMapListComponent, decorators: [{
|
|
7390
7393
|
type: Component,
|
|
7391
|
-
args: [{ selector: 'lib-puro-map-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"map\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"map__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"map__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"map__paragraph\">\n <p>\n {{ description }}\n </p>\n @if (ndDescription) {\n <p>\n {{ ndDescription }}\n </p>\n }\n </div>\n }\n <div class=\"map__inner\">\n <div class=\"mapPoints\">\n <div class=\"mapPoints__inner\">\n <div class=\"mapPoints__headingSection\">\n @if (ndTitle) {\n <h3 class=\"mapPoints__heading\">\n {{ ndTitle }}\n </h3>\n }\n @if (subtitle) {\n <p class=\"mapPoints__subHeading\">{{ subtitle }}</p>\n }\n </div>\n @if (items) {\n <ul class=\"mapPoints__list\">\n @for (item of items; track $index) {\n <li\n class=\"mapPoints__item\"\n [ngClass]=\"{ active: selected() === item }\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"mapPoints__itemHeading\">\n <span>{{ $index + 1 }}</span>\n <p>{{ item.title }}</p>\n <i class=\"icon icon-91\"></i>\n </div>\n <div class=\"mapPoints__itemContent\">\n <div class=\"mapPoints__itemGraphic\">\n @if (item.image) {\n <img\n [ngSrc]=\"item.image.src\"\n decoding=\"async\"\n class=\"mapPoints__itemGraphic--img\"\n width=\"420\"\n height=\"320\"\n [alt]=\"item.title\"\n />\n }\n </div>\n <div class=\"mapPoints__itemParagraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n <div class=\"mapLocation\">\n <div class=\"mapLocation__inner\">\n @if (mapImage) {\n <img\n class=\"mapLocation__bigMap\"\n [ngSrc]=\"mapImage.src\"\n decoding=\"async\"\n width=\"1240\"\n height=\"1030\"\n [alt]=\"mapImage.alt\"\n />\n }\n\n @if (items) {\n @for (item of items; track $index) {\n @if (item.mapImage) {\n <img\n class=\"mapLocation__smallMap\"\n [ngClass]=\"{ active: selected() === item }\"\n [ngSrc]=\"item.mapImage.src\"\n decoding=\"async\"\n width=\"1100\"\n height=\"910\"\n [alt]=\"item.title\"\n />\n }\n }\n }\n </div>\n </div>\n </div>\n</section>\n" }]
|
|
7394
|
+
args: [{ selector: 'lib-puro-map-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"map generalMargin\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"map__title\"\n [color]=\"textColors?.pretitle\"\n [content]=\"pretitle\"\n ></lib-puro-dynamic-heading>\n }\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"map__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"map__paragraph\">\n <p>\n {{ description }}\n </p>\n @if (ndDescription) {\n <p>\n {{ ndDescription }}\n </p>\n }\n </div>\n }\n <div class=\"map__inner\">\n <div class=\"mapPoints\">\n <div class=\"mapPoints__inner\">\n <div class=\"mapPoints__headingSection\">\n @if (ndTitle) {\n <h3 class=\"mapPoints__heading\">\n {{ ndTitle }}\n </h3>\n }\n @if (subtitle) {\n <p class=\"mapPoints__subHeading\">{{ subtitle }}</p>\n }\n </div>\n @if (items) {\n <ul class=\"mapPoints__list\">\n @for (item of items; track $index) {\n <li\n class=\"mapPoints__item\"\n [ngClass]=\"{ active: selected() === item }\"\n (click)=\"selectItem(item)\"\n >\n <div class=\"mapPoints__itemHeading\">\n <span>{{ $index + 1 }}</span>\n <p>{{ item.title }}</p>\n <i class=\"icon icon-91\"></i>\n </div>\n <div class=\"mapPoints__itemContent\">\n <div class=\"mapPoints__itemGraphic\">\n @if (item.image) {\n <img\n [ngSrc]=\"item.image.src\"\n decoding=\"async\"\n class=\"mapPoints__itemGraphic--img\"\n width=\"420\"\n height=\"320\"\n [alt]=\"item.title\"\n />\n }\n </div>\n <div class=\"mapPoints__itemParagraph\">\n <p>\n {{ item.description }}\n </p>\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n </div>\n <div class=\"mapLocation\">\n <div class=\"mapLocation__inner\">\n @if (mapImage) {\n <img\n class=\"mapLocation__bigMap\"\n [ngSrc]=\"mapImage.src\"\n decoding=\"async\"\n width=\"1240\"\n height=\"1030\"\n [alt]=\"mapImage.alt\"\n />\n }\n\n @if (items) {\n @for (item of items; track $index) {\n @if (item.mapImage) {\n <img\n class=\"mapLocation__smallMap\"\n [ngClass]=\"{ active: selected() === item }\"\n [ngSrc]=\"item.mapImage.src\"\n decoding=\"async\"\n width=\"1100\"\n height=\"910\"\n [alt]=\"item.title\"\n />\n }\n }\n }\n </div>\n </div>\n </div>\n</section>\n" }]
|
|
7392
7395
|
}], propDecorators: { mapImage: [{
|
|
7393
7396
|
type: Input
|
|
7394
7397
|
}], title: [{
|
|
@@ -7899,11 +7902,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7899
7902
|
|
|
7900
7903
|
class PuroScheduleComponent {
|
|
7901
7904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7902
|
-
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\">\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 }); }
|
|
7905
|
+
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 }); }
|
|
7903
7906
|
}
|
|
7904
7907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroScheduleComponent, decorators: [{
|
|
7905
7908
|
type: Component,
|
|
7906
|
-
args: [{ selector: 'lib-puro-schedule', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"schedule\">\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"] }]
|
|
7909
|
+
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"] }]
|
|
7907
7910
|
}], propDecorators: { items: [{
|
|
7908
7911
|
type: Input
|
|
7909
7912
|
}], title: [{
|
|
@@ -7954,11 +7957,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7954
7957
|
|
|
7955
7958
|
class PuroSlider2colComponent {
|
|
7956
7959
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroSlider2colComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7957
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroSlider2colComponent, isStandalone: true, selector: "lib-puro-slider2col", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<section\n class=\"imageGrid imageGrid--version-3 js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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=\"2\"\n data-slides_laptop=\"2\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <div class=\"imageGrid__inner relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div>\n <a\n [href]=\"item?.buttons?.[1]?.url\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item.title\"\n >\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"780\"\n height=\"735\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\" [innerHTML]=\"item.title\"></h2>\n }\n @if (item.subtitle) {\n <
|
|
7960
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroSlider2colComponent, isStandalone: true, selector: "lib-puro-slider2col", inputs: { title: "title", items: "items" }, ngImport: i0, template: "<section\n class=\"imageGrid imageGrid--version-3 js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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=\"2\"\n data-slides_laptop=\"2\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <div class=\"imageGrid__inner relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div>\n <a\n [href]=\"item?.buttons?.[1]?.url\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item.title\"\n >\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"780\"\n height=\"735\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\" [innerHTML]=\"item.title\"></h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n </div>\n\n <div class=\"btn__group\">\n @if (item.buttons && item.buttons[1]) {\n <a\n [href]=\"item.buttons[1].url\"\n class=\"btn btn__secondary--outline\"\n [linkType]=\"item.buttons[1].linkType\"\n [attr.aria-label]=\"item.buttons[1].label\"\n >\n <span>{{ item.buttons[1].label }}</span>\n </a>\n }\n @if (item.buttons && item.buttons[0]) {\n <a\n [href]=\"item.buttons[0].url\"\n class=\"btn btn__primary\"\n [linkType]=\"item.buttons[0].linkType\"\n [attr.aria-label]=\"item.buttons[0].label\"\n >\n <span>{{ item.buttons[0].label }}</span>\n </a>\n }\n </div>\n </a>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n", styles: ["img{border:0;font-size:1.2rem;max-width:100%;height:100%!important;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
7958
7961
|
}
|
|
7959
7962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroSlider2colComponent, decorators: [{
|
|
7960
7963
|
type: Component,
|
|
7961
|
-
args: [{ selector: 'lib-puro-slider2col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], template: "<section\n class=\"imageGrid imageGrid--version-3 js-active-slider\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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=\"2\"\n data-slides_laptop=\"2\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <div class=\"imageGrid__inner relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div>\n <a\n [href]=\"item?.buttons?.[1]?.url\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item.title\"\n >\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"780\"\n height=\"735\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading\" [innerHTML]=\"item.title\"></h2>\n }\n @if (item.subtitle) {\n <
|
|
7964
|
+
args: [{ selector: 'lib-puro-slider2col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], template: "<section\n class=\"imageGrid imageGrid--version-3 js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-imageGrid-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=\"2\"\n data-slides_laptop=\"2\"\n data-slides_tablet=\"2\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <span class=\"imageGrid__title\">{{ title }}</span>\n }\n <div class=\"imageGrid__inner relative\">\n <div class=\"js-imageGrid-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div>\n <a\n [href]=\"item?.buttons?.[1]?.url\"\n class=\"imageGrid__box\"\n [attr.aria-label]=\"item.title\"\n >\n <div\n class=\"imageGrid__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"imageGrid__graphic--img\"\n [alt]=\"item.img.alt\"\n width=\"780\"\n height=\"735\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"imageGrid__content\">\n @if (item.title) {\n <h2 class=\"imageGrid__heading photo\" [innerHTML]=\"item.title\"></h2>\n }\n @if (item.subtitle) {\n <p class=\"imageGrid__subHeading photo\">{{\n item.subtitle\n }}</p>\n }\n </div>\n\n <div class=\"btn__group\">\n @if (item.buttons && item.buttons[1]) {\n <a\n [href]=\"item.buttons[1].url\"\n class=\"btn btn__secondary--outline\"\n [linkType]=\"item.buttons[1].linkType\"\n [attr.aria-label]=\"item.buttons[1].label\"\n >\n <span>{{ item.buttons[1].label }}</span>\n </a>\n }\n @if (item.buttons && item.buttons[0]) {\n <a\n [href]=\"item.buttons[0].url\"\n class=\"btn btn__primary\"\n [linkType]=\"item.buttons[0].linkType\"\n [attr.aria-label]=\"item.buttons[0].label\"\n >\n <span>{{ item.buttons[0].label }}</span>\n </a>\n }\n </div>\n </a>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n", styles: ["img{border:0;font-size:1.2rem;max-width:100%;height:100%!important;font-style:italic}\n"] }]
|
|
7962
7965
|
}], propDecorators: { title: [{
|
|
7963
7966
|
type: Input
|
|
7964
7967
|
}], items: [{
|
|
@@ -8315,11 +8318,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8315
8318
|
|
|
8316
8319
|
class PuroZigzag2colComponent {
|
|
8317
8320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroZigzag2colComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroZigzag2colComponent, isStandalone: true, selector: "lib-puro-zigzag2col", inputs: { img: "img", pretitle: "pretitle", title: "title", ndImg: "ndImg", ndTitle: "ndTitle", description: "description", button: "button" }, ngImport: i0, template: "<section class=\"enjoyAuthentic\">\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n <div class=\"enjoyAuthentic__box\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n width=\"818\"\n height=\"907\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n @if (title) {\n <h2 class=\"enjoyAuthentic__heading\">{{ title }}</h2>\n }\n </div>\n </div>\n </div>\n <div class=\"enjoyAuthentic__box enjoyAuthentic__box--right\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (ndImg) {\n <img\n [ngSrc]=\"ndImg.src\"\n width=\"591\"\n height=\"702\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"ndImg.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (ndTitle) {\n <
|
|
8321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroZigzag2colComponent, isStandalone: true, selector: "lib-puro-zigzag2col", inputs: { img: "img", pretitle: "pretitle", title: "title", ndImg: "ndImg", ndTitle: "ndTitle", description: "description", button: "button" }, ngImport: i0, template: "<section class=\"enjoyAuthentic generalMargin\">\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n <div class=\"enjoyAuthentic__box\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n width=\"818\"\n height=\"907\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n @if (title) {\n <h2 class=\"enjoyAuthentic__heading\">{{ title }}</h2>\n }\n </div>\n </div>\n </div>\n <div class=\"enjoyAuthentic__box enjoyAuthentic__box--right\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (ndImg) {\n <img\n [ngSrc]=\"ndImg.src\"\n width=\"591\"\n height=\"702\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"ndImg.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (ndTitle) {\n <p class=\"enjoyAuthentic__subHeading\">{{ ndTitle }}</p>\n }\n @if (description) {\n <div class=\"enjoyAuthentic__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8319
8322
|
}
|
|
8320
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroZigzag2colComponent, decorators: [{
|
|
8321
8324
|
type: Component,
|
|
8322
|
-
args: [{ selector: 'lib-puro-zigzag2col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"enjoyAuthentic\">\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n <div class=\"enjoyAuthentic__box\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n width=\"818\"\n height=\"907\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n @if (title) {\n <h2 class=\"enjoyAuthentic__heading\">{{ title }}</h2>\n }\n </div>\n </div>\n </div>\n <div class=\"enjoyAuthentic__box enjoyAuthentic__box--right\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (ndImg) {\n <img\n [ngSrc]=\"ndImg.src\"\n width=\"591\"\n height=\"702\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"ndImg.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (ndTitle) {\n <
|
|
8325
|
+
args: [{ selector: 'lib-puro-zigzag2col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"enjoyAuthentic generalMargin\">\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n <div class=\"enjoyAuthentic__box\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n width=\"818\"\n height=\"907\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (pretitle) {\n <span class=\"enjoyAuthentic__title\">{{ pretitle }}</span>\n }\n @if (title) {\n <h2 class=\"enjoyAuthentic__heading\">{{ title }}</h2>\n }\n </div>\n </div>\n </div>\n <div class=\"enjoyAuthentic__box enjoyAuthentic__box--right\">\n <div class=\"enjoyAuthentic__graphic\">\n @if (ndImg) {\n <img\n [ngSrc]=\"ndImg.src\"\n width=\"591\"\n height=\"702\"\n class=\"enjoyAuthentic__graphic--img\"\n [alt]=\"ndImg.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"enjoyAuthentic__content\">\n <div>\n @if (ndTitle) {\n <p class=\"enjoyAuthentic__subHeading\">{{ ndTitle }}</p>\n }\n @if (description) {\n <div class=\"enjoyAuthentic__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [linkType]=\"button.linkType\"\n [href]=\"button.url\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n ><span>{{ button.label }}</span></a\n >\n </div>\n }\n </div>\n </div>\n </div>\n</section>\n" }]
|
|
8323
8326
|
}], propDecorators: { img: [{
|
|
8324
8327
|
type: Input
|
|
8325
8328
|
}], pretitle: [{
|