ctt-puro 0.71.19 → 0.71.21

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.
@@ -13,6 +13,7 @@ import { RecaptchaModule } from 'ng-recaptcha';
13
13
  import { BreakpointObserver } from '@angular/cdk/layout';
14
14
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
15
15
  import { distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
16
+ import * as jquery from 'jquery';
16
17
 
17
18
  class PuroDynamicHeadingComponent {
18
19
  static { this.allowedTags = [
@@ -1803,11 +1804,11 @@ class PuroBannerInfoComponent {
1803
1804
  }
1804
1805
  }
1805
1806
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBannerInfoComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
1806
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBannerInfoComponent, isStandalone: true, selector: "lib-puro-banner-info", inputs: { title: "title", description: "description", button: "button", frameUrl: "frameUrl", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"text text__withBg generalMargin\">\n <div class=\"text__container\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"text__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"text__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n @if (frameUrl) {\n <iframe\n width=\"100%\"\n height=\"250\"\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n ></iframe>\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: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1807
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroBannerInfoComponent, isStandalone: true, selector: "lib-puro-banner-info", inputs: { title: "title", description: "description", button: "button", frameUrl: "frameUrl", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"text text__withBg generalMargin\">\n <div class=\"text__container\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"text__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"text__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n @if (frameUrl) {\n <iframe\n width=\"100%\"\n height=\"250\"\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\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: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1807
1808
  }
1808
1809
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroBannerInfoComponent, decorators: [{
1809
1810
  type: Component,
1810
- args: [{ selector: 'lib-puro-banner-info', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"text text__withBg generalMargin\">\n <div class=\"text__container\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"text__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"text__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n @if (frameUrl) {\n <iframe\n width=\"100%\"\n height=\"250\"\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n ></iframe>\n }\n </div>\n</section>\n" }]
1811
+ args: [{ selector: 'lib-puro-banner-info', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"text text__withBg generalMargin\">\n <div class=\"text__container\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"text__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"text__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n class=\"btn btn__primary--outline\"\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n </div>\n }\n @if (frameUrl) {\n <iframe\n width=\"100%\"\n height=\"250\"\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\n }\n </div>\n</section>\n" }]
1811
1812
  }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
1812
1813
  type: Input
1813
1814
  }], description: [{
@@ -8040,7 +8041,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
8040
8041
  type: Input
8041
8042
  }] } });
8042
8043
 
8044
+ // 2. Ejecución inmediata a nivel de módulo (100% SSR Safe).
8045
+ // Al evaluarse antes de que se instancie la clase, aseguramos que $ exista
8046
+ // en el navegador ANTES de que las directivas de ctt-puro intenten usarlo.
8047
+ if (typeof window !== 'undefined') {
8048
+ // Extraemos .default para evitar incompatibilidades con esbuild en Angular 17
8049
+ const $ = jquery.default || jquery;
8050
+ window.$ = window.jQuery = $;
8051
+ }
8043
8052
  class PuroGrid3colSliderComponent {
8053
+ constructor() {
8054
+ // 3. Herramienta nativa de Angular para SSR
8055
+ this.platformId = inject(PLATFORM_ID);
8056
+ // Refuerzo de seguridad dentro del ciclo de vida de Angular (solo en cliente)
8057
+ if (isPlatformBrowser(this.platformId)) {
8058
+ const win = window;
8059
+ const $ = jquery.default || jquery;
8060
+ if (!win.$ || !win.jQuery) {
8061
+ win.$ = win.jQuery = $;
8062
+ }
8063
+ }
8064
+ }
8044
8065
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroGrid3colSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8045
8066
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroGrid3colSliderComponent, isStandalone: true, selector: "lib-puro-grid3col-slider", inputs: { title: "title", button: "button", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"1\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div class=\"discover__box\">\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n @if (item.img) {\n <img\n [src]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n loading=\"lazy\"\n />\n }\n\n <div class=\"discover__content\"> \n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n \n ></h3>\n }\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n \n </div>\n </a>\n\n @if (item.button) {\n <div class=\"btn__group\">\n <a\n class=\"btn__link\"\n [linkType]=\"item.button?.linkType\"\n [href]=\"item.button?.url\"\n [attr.aria-label]=\"\n item.button.label ?? 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </a>\n </div>\n }\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: AutoImageZoomWrapperDirective, selector: "img[src]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8046
8067
  }
@@ -8053,7 +8074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
8053
8074
  AutoImageZoomWrapperDirective,
8054
8075
  PuroDynamicHeadingComponent,
8055
8076
  ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"discover discover--noRadius js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-discover-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"3\"\n data-slides_laptop=\"3\"\n data-slides_tablet=\"1\"\n data-slides_mobile=\"1\"\n data-slides_mobile_small=\"1\"\n data-slides_mobile_xsmall=\"1\"\n>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'span'\"\n cssClass=\"discover__title\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"discover__inner relative\">\n <div class=\"discover__container\">\n <div\n class=\"js-discover-slider discover__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n @if (item) {\n <div class=\"discover__box\">\n <a\n [href]=\"item.button?.url\"\n [linkType]=\"item.button?.linkType\"\n class=\"discover__graphic js-slider_fix-arrows-zone\"\n [attr.aria-label]=\"\n item.button?.label ?? 'Item link'\n \"\n >\n @if (item.img) {\n <img\n [src]=\"item.img.src\"\n width=\"391\"\n height=\"533\"\n class=\"discover__graphic--img\"\n [alt]=\"item.img.alt\"\n loading=\"lazy\"\n />\n }\n\n <div class=\"discover__content\"> \n @if (item.title) {\n <h3\n class=\"discover__heading photo\"\n [innerHTML]=\"item.title\"\n \n ></h3>\n }\n @if (item.pretitle) {\n <p class=\"discover__subHeading photo\">\n {{ item.pretitle }}\n </p>\n }\n \n </div>\n </a>\n\n @if (item.button) {\n <div class=\"btn__group\">\n <a\n class=\"btn__link\"\n [linkType]=\"item.button?.linkType\"\n [href]=\"item.button?.url\"\n [attr.aria-label]=\"\n item.button.label ?? 'Item button'\n \"\n >\n <span>{{ item.button.label }}</span>\n </a>\n </div>\n }\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" }]
8056
- }], propDecorators: { title: [{
8077
+ }], ctorParameters: () => [], propDecorators: { title: [{
8057
8078
  type: Input
8058
8079
  }], button: [{
8059
8080
  type: Input
@@ -8697,11 +8718,11 @@ class PuroIframeComponent {
8697
8718
  }
8698
8719
  }
8699
8720
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroIframeComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
8700
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroIframeComponent, isStandalone: true, selector: "lib-puro-iframe", inputs: { frameUrl: "frameUrl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"iframe-container generalMargin\">\n @if (isFourvenues) {\n <div [id]=\"fourvenuesContainerId\"></div>\n } @else if (safeUrl) {\n <iframe [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n }\n</div>\n", styles: [".iframe-container{display:flex;align-items:center;justify-content:center;overflow:hidden}.iframe-container iframe{width:100vw;height:140vh;border:none;scrollbar-width:none;-ms-overflow-style:none}.iframe-container iframe::-webkit-scrollbar{display:none}.s-list-exp .container{padding:0!important}@media (max-width: 1024px){.generalMargin{padding-inline:2rem!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8721
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroIframeComponent, isStandalone: true, selector: "lib-puro-iframe", inputs: { frameUrl: "frameUrl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"iframe-container generalMargin\">\n @if (isFourvenues) {\n <div [id]=\"fourvenuesContainerId\"></div>\n } @else if (safeUrl) {\n <iframe\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\n }\n</div>\n", styles: [".iframe-container{display:flex;align-items:center;justify-content:center;overflow:hidden}.iframe-container iframe{width:100vw;height:140vh;border:none;scrollbar-width:none;-ms-overflow-style:none}.iframe-container iframe::-webkit-scrollbar{display:none}.s-list-exp .container{padding:0!important}@media (max-width: 1024px){.generalMargin{padding-inline:2rem!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8701
8722
  }
8702
8723
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroIframeComponent, decorators: [{
8703
8724
  type: Component,
8704
- args: [{ selector: 'lib-puro-iframe', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"iframe-container generalMargin\">\n @if (isFourvenues) {\n <div [id]=\"fourvenuesContainerId\"></div>\n } @else if (safeUrl) {\n <iframe [src]=\"safeUrl\" frameborder=\"0\" allowfullscreen></iframe>\n }\n</div>\n", styles: [".iframe-container{display:flex;align-items:center;justify-content:center;overflow:hidden}.iframe-container iframe{width:100vw;height:140vh;border:none;scrollbar-width:none;-ms-overflow-style:none}.iframe-container iframe::-webkit-scrollbar{display:none}.s-list-exp .container{padding:0!important}@media (max-width: 1024px){.generalMargin{padding-inline:2rem!important}}\n"] }]
8725
+ args: [{ selector: 'lib-puro-iframe', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"iframe-container generalMargin\">\n @if (isFourvenues) {\n <div [id]=\"fourvenuesContainerId\"></div>\n } @else if (safeUrl) {\n <iframe\n [src]=\"safeUrl\"\n frameborder=\"0\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\n }\n</div>\n", styles: [".iframe-container{display:flex;align-items:center;justify-content:center;overflow:hidden}.iframe-container iframe{width:100vw;height:140vh;border:none;scrollbar-width:none;-ms-overflow-style:none}.iframe-container iframe::-webkit-scrollbar{display:none}.s-list-exp .container{padding:0!important}@media (max-width: 1024px){.generalMargin{padding-inline:2rem!important}}\n"] }]
8705
8726
  }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { frameUrl: [{
8706
8727
  type: Input
8707
8728
  }] } });
@@ -9076,7 +9097,7 @@ class PuroInfoVideoComponent {
9076
9097
  return this.sanitizer.bypassSecurityTrustResourceUrl(embed);
9077
9098
  }
9078
9099
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoVideoComponent, deps: [{ token: i1.DomSanitizer }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
9079
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoVideoComponent, isStandalone: true, selector: "lib-puro-info-video", inputs: { title: "title", subtitle: "subtitle", description: "description", button: "button", video: "video", reverse: "reverse", tags: "tags", textColors: "textColors" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<section\n class=\"eventVideo eventVideo--right generalMargin\"\n [ngClass]=\"{ 'eventVideo--right': reverse }\"\n resizeZoom\n>\n <div class=\"eventVideo__player\">\n <div class=\"eventVideo__playerInner\">\n @if (showVideo) {\n @if (isYouTube(video!.source!)) {\n <iframe\n class=\"eventVideo__media\"\n [src]=\"getYouTubeEmbed(video!.source!)\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; picture-in-picture\"\n allowfullscreen\n tabindex=\"-1\"\n aria-hidden=\"true\"\n width=\"100%\"\n height=\"100%\"\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"video!.source!\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n <div class=\"eventVideo__content eventVideo__content--alignCenter\">\n <div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"eventVideo__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div class=\"eventVideo__subHeading\" [innerHTML]=\"subtitle\"></div>\n }\n @if (description) {\n <div class=\"eventVideo__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\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 </div>\n</section>\n", styles: [".eventVideo__playerInner{overflow:hidden}.eventVideo__playerInner>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.eventVideo__playerInner>iframe{position:absolute;top:50%;left:50%;display:block;width:132%;height:132%;border:0;pointer-events:none;transform-origin:center center;transform:translate(-50%,-50%)}@supports (width: 100cqw){.eventVideo__playerInner{container-type:size}.eventVideo__playerInner>iframe{width:max(132cqw,234.6666666667cqh);height:max(132cqh,74.25cqw);transform:translate(-50%,-50%)}}\n"], 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: PuroResizeZoomDirective, selector: "[resizeZoom]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }] }); }
9100
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoVideoComponent, isStandalone: true, selector: "lib-puro-info-video", inputs: { title: "title", subtitle: "subtitle", description: "description", button: "button", video: "video", reverse: "reverse", tags: "tags", textColors: "textColors" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<section\n class=\"eventVideo eventVideo--right generalMargin\"\n [ngClass]=\"{ 'eventVideo--right': reverse }\"\n resizeZoom\n>\n <div class=\"eventVideo__player\">\n <div class=\"eventVideo__playerInner\">\n @if (showVideo) {\n @if (isYouTube(video!.source!)) {\n <iframe\n class=\"eventVideo__media\"\n [src]=\"getYouTubeEmbed(video!.source!)\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; picture-in-picture\"\n allowfullscreen\n tabindex=\"-1\"\n aria-hidden=\"true\"\n width=\"100%\"\n height=\"100%\"\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"video!.source!\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n <div class=\"eventVideo__content eventVideo__content--alignCenter\">\n <div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"eventVideo__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"eventVideo__subHeading\"\n [innerHTML]=\"subtitle\"\n ></div>\n }\n @if (description) {\n <div class=\"eventVideo__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\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 </div>\n</section>\n", styles: [".eventVideo__playerInner{overflow:hidden}.eventVideo__playerInner>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.eventVideo__playerInner>iframe{position:absolute;top:50%;left:50%;display:block;width:132%;height:132%;border:0;pointer-events:none;transform-origin:center center;transform:translate(-50%,-50%)}@supports (width: 100cqw){.eventVideo__playerInner{container-type:size}.eventVideo__playerInner>iframe{width:max(132cqw,234.6666666667cqh);height:max(132cqh,74.25cqw);transform:translate(-50%,-50%)}}\n"], 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: PuroResizeZoomDirective, selector: "[resizeZoom]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }] }); }
9080
9101
  }
9081
9102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoVideoComponent, decorators: [{
9082
9103
  type: Component,
@@ -9086,7 +9107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
9086
9107
  PuroResizeZoomDirective,
9087
9108
  PuroResizeZoomDirective,
9088
9109
  PuroDynamicHeadingComponent,
9089
- ], template: "<section\n class=\"eventVideo eventVideo--right generalMargin\"\n [ngClass]=\"{ 'eventVideo--right': reverse }\"\n resizeZoom\n>\n <div class=\"eventVideo__player\">\n <div class=\"eventVideo__playerInner\">\n @if (showVideo) {\n @if (isYouTube(video!.source!)) {\n <iframe\n class=\"eventVideo__media\"\n [src]=\"getYouTubeEmbed(video!.source!)\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; picture-in-picture\"\n allowfullscreen\n tabindex=\"-1\"\n aria-hidden=\"true\"\n width=\"100%\"\n height=\"100%\"\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"video!.source!\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n <div class=\"eventVideo__content eventVideo__content--alignCenter\">\n <div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"eventVideo__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div class=\"eventVideo__subHeading\" [innerHTML]=\"subtitle\"></div>\n }\n @if (description) {\n <div class=\"eventVideo__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\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 </div>\n</section>\n", styles: [".eventVideo__playerInner{overflow:hidden}.eventVideo__playerInner>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.eventVideo__playerInner>iframe{position:absolute;top:50%;left:50%;display:block;width:132%;height:132%;border:0;pointer-events:none;transform-origin:center center;transform:translate(-50%,-50%)}@supports (width: 100cqw){.eventVideo__playerInner{container-type:size}.eventVideo__playerInner>iframe{width:max(132cqw,234.6666666667cqh);height:max(132cqh,74.25cqw);transform:translate(-50%,-50%)}}\n"] }]
9110
+ ], template: "<section\n class=\"eventVideo eventVideo--right generalMargin\"\n [ngClass]=\"{ 'eventVideo--right': reverse }\"\n resizeZoom\n>\n <div class=\"eventVideo__player\">\n <div class=\"eventVideo__playerInner\">\n @if (showVideo) {\n @if (isYouTube(video!.source!)) {\n <iframe\n class=\"eventVideo__media\"\n [src]=\"getYouTubeEmbed(video!.source!)\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; picture-in-picture\"\n allowfullscreen\n tabindex=\"-1\"\n aria-hidden=\"true\"\n width=\"100%\"\n height=\"100%\"\n referrerpolicy=\"strict-origin-when-cross-origin\"\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"video!.source!\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n <div class=\"eventVideo__content eventVideo__content--alignCenter\">\n <div>\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"eventVideo__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <div\n class=\"eventVideo__subHeading\"\n [innerHTML]=\"subtitle\"\n ></div>\n }\n @if (description) {\n <div class=\"eventVideo__paragraph\">\n <div [innerHTML]=\"description\"></div>\n </div>\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 </div>\n</section>\n", styles: [".eventVideo__playerInner{overflow:hidden}.eventVideo__playerInner>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.eventVideo__playerInner>iframe{position:absolute;top:50%;left:50%;display:block;width:132%;height:132%;border:0;pointer-events:none;transform-origin:center center;transform:translate(-50%,-50%)}@supports (width: 100cqw){.eventVideo__playerInner{container-type:size}.eventVideo__playerInner>iframe{width:max(132cqw,234.6666666667cqh);height:max(132cqh,74.25cqw);transform:translate(-50%,-50%)}}\n"] }]
9090
9111
  }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: Object, decorators: [{
9091
9112
  type: Inject,
9092
9113
  args: [PLATFORM_ID]
@@ -10317,7 +10338,7 @@ class PuroTopSliderComponent {
10317
10338
  return !this.showVideo && (this.resolvedImages?.length ?? 0) > 1;
10318
10339
  }
10319
10340
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTopSliderComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
10320
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTopSliderComponent, isStandalone: true, selector: "lib-puro-top-slider", inputs: { engine: "engine", title: "title", mainTitle: "mainTitle", pretitle: "pretitle", subtitle: "subtitle", spotify: "spotify", newsletter: "newsletter", languages: "languages", fidelity: "fidelity", offers: "offers", selectedLanguage: "selectedLanguage", images: "images", imagesMobile: "imagesMobile", video: "video", currentHotelId: "currentHotelId", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ? resolvedImages : undefined\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-banner-slider\"\n data-slider_showbtns=\"false\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n @if (showVideo) {\n <div class=\"banner__video\">\n <div class=\"banner__video--inner\">\n @if (video?.source; as src) {\n @if (isYouTube(src)) {\n <iframe\n id=\"YouTubeVideoPlayer\"\n width=\"1920\"\n height=\"1080\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n [src]=\"getYouTubeEmbed(src)\"\n frameborder=\"0\"\n allowfullscreen\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"src\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n } @else {\n @if (resolvedImages?.length) {\n <img\n class=\"banner__image banner__image--lcp\"\n [src]=\"resolvedImages?.[0]?.src\"\n [alt]=\"resolvedImages?.[0]?.alt || mainTitle\"\n width=\"1920\"\n height=\"980\"\n fetchpriority=\"high\"\n loading=\"eager\"\n decoding=\"async\"\n />\n }\n\n <!-- SLIDER SOLO SI HAY M\u00C1S DE 1 -->\n @if (resolvedImages && resolvedImages.length > 1) {\n <div class=\"js-banner-slider\">\n @for (image of resolvedImages.slice(1); track $index) {\n <div class=\"banner__item\">\n <img\n [src]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.mainTitle || 'h1'\"\n wrapper=\"span\"\n cssClass=\"banner__title\"\n [color]=\"textColors?.mainTitle\"\n [content]=\"mainTitle\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'p'\"\n cssClass=\"banner__text\"\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=\"banner__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.subtitle || 'p'\"\n cssClass=\"banner__text\"\n [color]=\"textColors?.subtitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n <div class=\"banner__actions\">\n <div class=\"banner__group banner__group--left\">\n @if (newsletter && newsletter.label) {\n <div class=\"banner__newsletter\">\n <a\n [href]=\"newsletter.url\"\n [linkType]=\"newsletter.linkType\"\n class=\"banner__newsletter--inner\"\n [attr.aria-label]=\"newsletter.label\"\n >\n <span class=\"icon-63\"></span>\n <strong>{{ newsletter.label }}</strong>\n </a>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (spotify && spotify.label && currentHotelId !== 5) {\n <div class=\"banner__spotify\">\n <a\n [href]=\"spotify.url\"\n [linkType]=\"spotify.linkType\"\n [attr.aria-label]=\"spotify.label\"\n class=\"banner__spotify--inner\"\n role=\"button\"\n [attr.aria-label]=\"spotify ?? 'spotify icon'\"\n >\n <span class=\"icon-82\"></span>\n <strong>{{ spotify.label }}</strong>\n </a>\n </div>\n }\n </div>\n\n <div class=\"banner__group banner__group--right\">\n @if (languages && selectedLanguage) {\n <div class=\"banner__language\">\n <div\n class=\"banner__language--inner js-active-modal\"\n activeModal\n data-modal_name=\"language\"\n role=\"button\"\n [attr.aria-label]=\"selectedLanguage\"\n >\n <span class=\"banner__language--icon\">{{\n selectedLanguage\n }}</span>\n <strong>{{ languages }}</strong>\n </div>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (fidelity && fidelity.label && currentHotelId !== 5) {\n <div class=\"banner__fidelityClub\">\n <a\n [href]=\"fidelity?.url\"\n [linkType]=\"fidelity?.linkType\"\n class=\"banner__fidelityClub--inner\"\n [attr.aria-label]=\"fidelity?.label\"\n >\n <span class=\"icon-60\"></span>\n <strong>{{ fidelity?.label }}</strong>\n </a>\n </div>\n }\n </div>\n </div>\n\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (engine && currentHotelId && currentHotelId !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\n }\n\n @if (offers) {\n <span\n activeModal\n class=\"banner__offers--tigger js-active-modal\"\n data-modal_name=\"t-offers\"\n role=\"button\"\n [attr.aria-label]=\"offers ?? 'Offers'\"\n >\n {{ offers }}\n </span>\n }\n</section>\n", styles: ["::ng-deep lib-puro-dynamic-heading .banner__text{font-family:var(--font-text)}::ng-deep lib-puro-dynamic-heading .banner__heading,::ng-deep lib-puro-dynamic-heading .banner__title{font-family:var(--font-title)}@media (min-width: 1024px){.banner__actions{padding-bottom:5.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroActiveModalDirective, selector: "[activeModal]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10341
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTopSliderComponent, isStandalone: true, selector: "lib-puro-top-slider", inputs: { engine: "engine", title: "title", mainTitle: "mainTitle", pretitle: "pretitle", subtitle: "subtitle", spotify: "spotify", newsletter: "newsletter", languages: "languages", fidelity: "fidelity", offers: "offers", selectedLanguage: "selectedLanguage", images: "images", imagesMobile: "imagesMobile", video: "video", currentHotelId: "currentHotelId", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ? resolvedImages : undefined\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-banner-slider\"\n data-slider_showbtns=\"false\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n @if (showVideo) {\n <div class=\"banner__video\">\n <div class=\"banner__video--inner\">\n @if (video?.source; as src) {\n @if (isYouTube(src)) {\n <iframe\n id=\"YouTubeVideoPlayer\"\n width=\"1920\"\n height=\"1080\"\n allow=\"\n accelerometer;\n autoplay;\n clipboard-write;\n encrypted-media;\n gyroscope;\n picture-in-picture;\n \"\n [src]=\"getYouTubeEmbed(src)\"\n frameborder=\"0\"\n referrerpolicy=\"strict-origin-when-cross-origin\"\n allowfullscreen\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"src\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n } @else {\n @if (resolvedImages?.length) {\n <img\n class=\"banner__image banner__image--lcp\"\n [src]=\"resolvedImages?.[0]?.src\"\n [alt]=\"resolvedImages?.[0]?.alt || mainTitle\"\n width=\"1920\"\n height=\"980\"\n fetchpriority=\"high\"\n loading=\"eager\"\n decoding=\"async\"\n />\n }\n\n <!-- SLIDER SOLO SI HAY M\u00C1S DE 1 -->\n @if (resolvedImages && resolvedImages.length > 1) {\n <div class=\"js-banner-slider\">\n @for (image of resolvedImages.slice(1); track $index) {\n <div class=\"banner__item\">\n <img\n [src]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.mainTitle || 'h1'\"\n wrapper=\"span\"\n cssClass=\"banner__title\"\n [color]=\"textColors?.mainTitle\"\n [content]=\"mainTitle\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'p'\"\n cssClass=\"banner__text\"\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=\"banner__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.subtitle || 'p'\"\n cssClass=\"banner__text\"\n [color]=\"textColors?.subtitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n <div class=\"banner__actions\">\n <div class=\"banner__group banner__group--left\">\n @if (newsletter && newsletter.label) {\n <div class=\"banner__newsletter\">\n <a\n [href]=\"newsletter.url\"\n [linkType]=\"newsletter.linkType\"\n class=\"banner__newsletter--inner\"\n [attr.aria-label]=\"newsletter.label\"\n >\n <span class=\"icon-63\"></span>\n <strong>{{ newsletter.label }}</strong>\n </a>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (spotify && spotify.label && currentHotelId !== 5) {\n <div class=\"banner__spotify\">\n <a\n [href]=\"spotify.url\"\n [linkType]=\"spotify.linkType\"\n [attr.aria-label]=\"spotify.label\"\n class=\"banner__spotify--inner\"\n role=\"button\"\n [attr.aria-label]=\"spotify ?? 'spotify icon'\"\n >\n <span class=\"icon-82\"></span>\n <strong>{{ spotify.label }}</strong>\n </a>\n </div>\n }\n </div>\n\n <div class=\"banner__group banner__group--right\">\n @if (languages && selectedLanguage) {\n <div class=\"banner__language\">\n <div\n class=\"banner__language--inner js-active-modal\"\n activeModal\n data-modal_name=\"language\"\n role=\"button\"\n [attr.aria-label]=\"selectedLanguage\"\n >\n <span class=\"banner__language--icon\">{{\n selectedLanguage\n }}</span>\n <strong>{{ languages }}</strong>\n </div>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (fidelity && fidelity.label && currentHotelId !== 5) {\n <div class=\"banner__fidelityClub\">\n <a\n [href]=\"fidelity?.url\"\n [linkType]=\"fidelity?.linkType\"\n class=\"banner__fidelityClub--inner\"\n [attr.aria-label]=\"fidelity?.label\"\n >\n <span class=\"icon-60\"></span>\n <strong>{{ fidelity?.label }}</strong>\n </a>\n </div>\n }\n </div>\n </div>\n\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (engine && currentHotelId && currentHotelId !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\n }\n\n @if (offers) {\n <span\n activeModal\n class=\"banner__offers--tigger js-active-modal\"\n data-modal_name=\"t-offers\"\n role=\"button\"\n [attr.aria-label]=\"offers ?? 'Offers'\"\n >\n {{ offers }}\n </span>\n }\n</section>\n", styles: ["::ng-deep lib-puro-dynamic-heading .banner__text{font-family:var(--font-text)}::ng-deep lib-puro-dynamic-heading .banner__heading,::ng-deep lib-puro-dynamic-heading .banner__title{font-family:var(--font-title)}@media (min-width: 1024px){.banner__actions{padding-bottom:5.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroActiveModalDirective, selector: "[activeModal]" }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10321
10342
  }
10322
10343
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTopSliderComponent, decorators: [{
10323
10344
  type: Component,
@@ -10328,7 +10349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
10328
10349
  PuroActiveModalDirective,
10329
10350
  PuroDynamicHeadingComponent,
10330
10351
  AutoImageZoomWrapperDirective,
10331
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ? resolvedImages : undefined\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-banner-slider\"\n data-slider_showbtns=\"false\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n @if (showVideo) {\n <div class=\"banner__video\">\n <div class=\"banner__video--inner\">\n @if (video?.source; as src) {\n @if (isYouTube(src)) {\n <iframe\n id=\"YouTubeVideoPlayer\"\n width=\"1920\"\n height=\"1080\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n [src]=\"getYouTubeEmbed(src)\"\n frameborder=\"0\"\n allowfullscreen\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"src\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n } @else {\n @if (resolvedImages?.length) {\n <img\n class=\"banner__image banner__image--lcp\"\n [src]=\"resolvedImages?.[0]?.src\"\n [alt]=\"resolvedImages?.[0]?.alt || mainTitle\"\n width=\"1920\"\n height=\"980\"\n fetchpriority=\"high\"\n loading=\"eager\"\n decoding=\"async\"\n />\n }\n\n <!-- SLIDER SOLO SI HAY M\u00C1S DE 1 -->\n @if (resolvedImages && resolvedImages.length > 1) {\n <div class=\"js-banner-slider\">\n @for (image of resolvedImages.slice(1); track $index) {\n <div class=\"banner__item\">\n <img\n [src]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.mainTitle || 'h1'\"\n wrapper=\"span\"\n cssClass=\"banner__title\"\n [color]=\"textColors?.mainTitle\"\n [content]=\"mainTitle\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'p'\"\n cssClass=\"banner__text\"\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=\"banner__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.subtitle || 'p'\"\n cssClass=\"banner__text\"\n [color]=\"textColors?.subtitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n <div class=\"banner__actions\">\n <div class=\"banner__group banner__group--left\">\n @if (newsletter && newsletter.label) {\n <div class=\"banner__newsletter\">\n <a\n [href]=\"newsletter.url\"\n [linkType]=\"newsletter.linkType\"\n class=\"banner__newsletter--inner\"\n [attr.aria-label]=\"newsletter.label\"\n >\n <span class=\"icon-63\"></span>\n <strong>{{ newsletter.label }}</strong>\n </a>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (spotify && spotify.label && currentHotelId !== 5) {\n <div class=\"banner__spotify\">\n <a\n [href]=\"spotify.url\"\n [linkType]=\"spotify.linkType\"\n [attr.aria-label]=\"spotify.label\"\n class=\"banner__spotify--inner\"\n role=\"button\"\n [attr.aria-label]=\"spotify ?? 'spotify icon'\"\n >\n <span class=\"icon-82\"></span>\n <strong>{{ spotify.label }}</strong>\n </a>\n </div>\n }\n </div>\n\n <div class=\"banner__group banner__group--right\">\n @if (languages && selectedLanguage) {\n <div class=\"banner__language\">\n <div\n class=\"banner__language--inner js-active-modal\"\n activeModal\n data-modal_name=\"language\"\n role=\"button\"\n [attr.aria-label]=\"selectedLanguage\"\n >\n <span class=\"banner__language--icon\">{{\n selectedLanguage\n }}</span>\n <strong>{{ languages }}</strong>\n </div>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (fidelity && fidelity.label && currentHotelId !== 5) {\n <div class=\"banner__fidelityClub\">\n <a\n [href]=\"fidelity?.url\"\n [linkType]=\"fidelity?.linkType\"\n class=\"banner__fidelityClub--inner\"\n [attr.aria-label]=\"fidelity?.label\"\n >\n <span class=\"icon-60\"></span>\n <strong>{{ fidelity?.label }}</strong>\n </a>\n </div>\n }\n </div>\n </div>\n\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (engine && currentHotelId && currentHotelId !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\n }\n\n @if (offers) {\n <span\n activeModal\n class=\"banner__offers--tigger js-active-modal\"\n data-modal_name=\"t-offers\"\n role=\"button\"\n [attr.aria-label]=\"offers ?? 'Offers'\"\n >\n {{ offers }}\n </span>\n }\n</section>\n", styles: ["::ng-deep lib-puro-dynamic-heading .banner__text{font-family:var(--font-text)}::ng-deep lib-puro-dynamic-heading .banner__heading,::ng-deep lib-puro-dynamic-heading .banner__title{font-family:var(--font-title)}@media (min-width: 1024px){.banner__actions{padding-bottom:5.5rem}}\n"] }]
10352
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ? resolvedImages : undefined\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-banner-slider\"\n data-slider_showbtns=\"false\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n @if (showVideo) {\n <div class=\"banner__video\">\n <div class=\"banner__video--inner\">\n @if (video?.source; as src) {\n @if (isYouTube(src)) {\n <iframe\n id=\"YouTubeVideoPlayer\"\n width=\"1920\"\n height=\"1080\"\n allow=\"\n accelerometer;\n autoplay;\n clipboard-write;\n encrypted-media;\n gyroscope;\n picture-in-picture;\n \"\n [src]=\"getYouTubeEmbed(src)\"\n frameborder=\"0\"\n referrerpolicy=\"strict-origin-when-cross-origin\"\n allowfullscreen\n ></iframe>\n } @else {\n <video\n autoplay\n muted\n loop\n playsinline\n width=\"100%\"\n height=\"100%\"\n >\n <source\n [src]=\"src\"\n [type]=\"video?.type || 'video/mp4'\"\n />\n </video>\n }\n }\n </div>\n </div>\n } @else {\n @if (resolvedImages?.length) {\n <img\n class=\"banner__image banner__image--lcp\"\n [src]=\"resolvedImages?.[0]?.src\"\n [alt]=\"resolvedImages?.[0]?.alt || mainTitle\"\n width=\"1920\"\n height=\"980\"\n fetchpriority=\"high\"\n loading=\"eager\"\n decoding=\"async\"\n />\n }\n\n <!-- SLIDER SOLO SI HAY M\u00C1S DE 1 -->\n @if (resolvedImages && resolvedImages.length > 1) {\n <div class=\"js-banner-slider\">\n @for (image of resolvedImages.slice(1); track $index) {\n <div class=\"banner__item\">\n <img\n [src]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.mainTitle || 'h1'\"\n wrapper=\"span\"\n cssClass=\"banner__title\"\n [color]=\"textColors?.mainTitle\"\n [content]=\"mainTitle\"\n ></lib-puro-dynamic-heading>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'p'\"\n cssClass=\"banner__text\"\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=\"banner__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (subtitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.subtitle || 'p'\"\n cssClass=\"banner__text\"\n [color]=\"textColors?.subtitle\"\n [content]=\"subtitle\"\n ></lib-puro-dynamic-heading>\n }\n </div>\n <div class=\"banner__actions\">\n <div class=\"banner__group banner__group--left\">\n @if (newsletter && newsletter.label) {\n <div class=\"banner__newsletter\">\n <a\n [href]=\"newsletter.url\"\n [linkType]=\"newsletter.linkType\"\n class=\"banner__newsletter--inner\"\n [attr.aria-label]=\"newsletter.label\"\n >\n <span class=\"icon-63\"></span>\n <strong>{{ newsletter.label }}</strong>\n </a>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (spotify && spotify.label && currentHotelId !== 5) {\n <div class=\"banner__spotify\">\n <a\n [href]=\"spotify.url\"\n [linkType]=\"spotify.linkType\"\n [attr.aria-label]=\"spotify.label\"\n class=\"banner__spotify--inner\"\n role=\"button\"\n [attr.aria-label]=\"spotify ?? 'spotify icon'\"\n >\n <span class=\"icon-82\"></span>\n <strong>{{ spotify.label }}</strong>\n </a>\n </div>\n }\n </div>\n\n <div class=\"banner__group banner__group--right\">\n @if (languages && selectedLanguage) {\n <div class=\"banner__language\">\n <div\n class=\"banner__language--inner js-active-modal\"\n activeModal\n data-modal_name=\"language\"\n role=\"button\"\n [attr.aria-label]=\"selectedLanguage\"\n >\n <span class=\"banner__language--icon\">{{\n selectedLanguage\n }}</span>\n <strong>{{ languages }}</strong>\n </div>\n </div>\n }\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (fidelity && fidelity.label && currentHotelId !== 5) {\n <div class=\"banner__fidelityClub\">\n <a\n [href]=\"fidelity?.url\"\n [linkType]=\"fidelity?.linkType\"\n class=\"banner__fidelityClub--inner\"\n [attr.aria-label]=\"fidelity?.label\"\n >\n <span class=\"icon-60\"></span>\n <strong>{{ fidelity?.label }}</strong>\n </a>\n </div>\n }\n </div>\n </div>\n\n <!-- hide buttons when Puro Oasis Urbano -->\n @if (engine && currentHotelId && currentHotelId !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\n }\n\n @if (offers) {\n <span\n activeModal\n class=\"banner__offers--tigger js-active-modal\"\n data-modal_name=\"t-offers\"\n role=\"button\"\n [attr.aria-label]=\"offers ?? 'Offers'\"\n >\n {{ offers }}\n </span>\n }\n</section>\n", styles: ["::ng-deep lib-puro-dynamic-heading .banner__text{font-family:var(--font-text)}::ng-deep lib-puro-dynamic-heading .banner__heading,::ng-deep lib-puro-dynamic-heading .banner__title{font-family:var(--font-title)}@media (min-width: 1024px){.banner__actions{padding-bottom:5.5rem}}\n"] }]
10332
10353
  }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { engine: [{
10333
10354
  type: Input
10334
10355
  }], title: [{