ctt-puro 0.66.10 → 0.67.0
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-top-slider/puro-top-slider.component.mjs +11 -13
- package/esm2022/lib/components/puro-top-slider/puro-top-slider.interface.mjs +1 -1
- package/esm2022/lib/services/mapper/mapper.service.mjs +23 -14
- package/fesm2022/ctt-puro.mjs +30 -23
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/lib/components/puro-top-slider/puro-top-slider.component.d.ts +12 -7
- package/lib/components/puro-top-slider/puro-top-slider.interface.d.ts +4 -3
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -5027,7 +5027,8 @@ class MapperService {
|
|
|
5027
5027
|
// hotel?.buttons?.filter((btn: any) => !!btn?.linkValue)
|
|
5028
5028
|
// );
|
|
5029
5029
|
const links = Utils.mapButtons(hotel?.links?.[0]?.siteId ?? this.siteId(), hotel?.links);
|
|
5030
|
-
const firstImg = hotel?.multimedia?.
|
|
5030
|
+
const firstImg = hotel?.multimedia?.filter((img) => img?.tags?.some((tag) => tag === 'TopSliderMovil' ||
|
|
5031
|
+
tag?.name === 'TopSliderMovil'))?.[0];
|
|
5031
5032
|
const img = this.getImageResponsive(firstImg);
|
|
5032
5033
|
return {
|
|
5033
5034
|
title,
|
|
@@ -5280,8 +5281,16 @@ class MapperService {
|
|
|
5280
5281
|
}
|
|
5281
5282
|
mapTopSlider(props, actions) {
|
|
5282
5283
|
const { texts, multimedia, video } = props;
|
|
5283
|
-
const images = this.getArrayImageResponsive(multimedia?.images || multimedia?.multimedia || multimedia?.imagenes)
|
|
5284
|
-
|
|
5284
|
+
const images = this.getArrayImageResponsive(multimedia?.images || multimedia?.multimedia || multimedia?.imagenes)?.map((img) => ({
|
|
5285
|
+
...img,
|
|
5286
|
+
width: 1920,
|
|
5287
|
+
height: 980,
|
|
5288
|
+
}));
|
|
5289
|
+
const imagesMobile = this.getArrayImageResponsive(multimedia?.imagenesmobile || [])?.map((img) => ({
|
|
5290
|
+
...img,
|
|
5291
|
+
width: 768,
|
|
5292
|
+
height: 1000,
|
|
5293
|
+
}));
|
|
5285
5294
|
const videoData = video?.src
|
|
5286
5295
|
? {
|
|
5287
5296
|
source: video.src,
|
|
@@ -5302,11 +5311,11 @@ class MapperService {
|
|
|
5302
5311
|
}
|
|
5303
5312
|
}
|
|
5304
5313
|
if (imagesMobile?.length) {
|
|
5305
|
-
const
|
|
5306
|
-
|
|
5307
|
-
|
|
5308
|
-
|
|
5309
|
-
|
|
5314
|
+
const heroImgMobile = new Image();
|
|
5315
|
+
heroImgMobile.src = imagesMobile[0].src;
|
|
5316
|
+
heroImgMobile.decoding = 'async';
|
|
5317
|
+
heroImgMobile.setAttribute('fetchpriority', 'high');
|
|
5318
|
+
heroImgMobile.loading = 'eager';
|
|
5310
5319
|
if (imagesMobile?.length > 1) {
|
|
5311
5320
|
const prefetch = new Image();
|
|
5312
5321
|
prefetch.src = imagesMobile[1].src;
|
|
@@ -6499,9 +6508,9 @@ class MapperService {
|
|
|
6499
6508
|
title: typeof props?.texts?.title === 'string'
|
|
6500
6509
|
? props?.texts?.title
|
|
6501
6510
|
: props?.texts?.title?.contain,
|
|
6502
|
-
pretitle: typeof props?.texts?.
|
|
6503
|
-
? props?.texts?.
|
|
6504
|
-
: props?.texts?.
|
|
6511
|
+
pretitle: typeof props?.texts?.subtitle === 'string'
|
|
6512
|
+
? props?.texts?.subtitle
|
|
6513
|
+
: props?.texts?.subtitle?.contain,
|
|
6505
6514
|
description: props?.texts?.description,
|
|
6506
6515
|
items: Utils.normalizeImages(props?.multimedia?.imagenes).map((img) => ({
|
|
6507
6516
|
year: img?.title,
|
|
@@ -6510,11 +6519,11 @@ class MapperService {
|
|
|
6510
6519
|
img: this.getImageResponsive(img),
|
|
6511
6520
|
})),
|
|
6512
6521
|
tags: {
|
|
6513
|
-
pretitle: props?.texts?.
|
|
6522
|
+
pretitle: props?.texts?.subtitle?.tag,
|
|
6514
6523
|
title: props?.texts?.title?.tag,
|
|
6515
6524
|
},
|
|
6516
6525
|
textColors: {
|
|
6517
|
-
pretitle: props?.texts?.
|
|
6526
|
+
pretitle: props?.texts?.subtitle?.color?.trim(),
|
|
6518
6527
|
title: props?.texts?.title?.color?.trim(),
|
|
6519
6528
|
},
|
|
6520
6529
|
identifier: identifier,
|
|
@@ -9343,14 +9352,6 @@ class PuroTopSliderComponent {
|
|
|
9343
9352
|
constructor(sanitizer) {
|
|
9344
9353
|
this.sanitizer = sanitizer;
|
|
9345
9354
|
this.screenSizer = inject(ScreenSizerService);
|
|
9346
|
-
this.platformId = inject(PLATFORM_ID);
|
|
9347
|
-
}
|
|
9348
|
-
ngOnInit() {
|
|
9349
|
-
if (isPlatformBrowser(this.platformId)) {
|
|
9350
|
-
if (this.screenSizer.width < 768 && this.imagesMobile?.length) {
|
|
9351
|
-
this.images = [...this.imagesMobile];
|
|
9352
|
-
}
|
|
9353
|
-
}
|
|
9354
9355
|
}
|
|
9355
9356
|
isYouTube(url) {
|
|
9356
9357
|
return /(?:youtube\.com|youtu\.be)/i.test(url ?? '');
|
|
@@ -9372,6 +9373,12 @@ class PuroTopSliderComponent {
|
|
|
9372
9373
|
get isMobile() {
|
|
9373
9374
|
return this.screenSizer.width <= 768;
|
|
9374
9375
|
}
|
|
9376
|
+
get resolvedImages() {
|
|
9377
|
+
if (this.isMobile && this.imagesMobile?.length) {
|
|
9378
|
+
return this.imagesMobile;
|
|
9379
|
+
}
|
|
9380
|
+
return this.images;
|
|
9381
|
+
}
|
|
9375
9382
|
get showVideo() {
|
|
9376
9383
|
return !!this.video && !this.isMobile;
|
|
9377
9384
|
}
|
|
@@ -9379,7 +9386,7 @@ class PuroTopSliderComponent {
|
|
|
9379
9386
|
return !this.showVideo;
|
|
9380
9387
|
}
|
|
9381
9388
|
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 }); }
|
|
9382
|
-
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" }, ngImport: i0, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ?
|
|
9389
|
+
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" }, 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\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 <div class=\"js-banner-slider\">\n @for (image of resolvedImages; track $index) {\n <div class=\"banner__item\">\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <h1 class=\"banner__title\">\n <span>{{ mainTitle }}</span>\n </h1>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <p class=\"banner__text\">{{ pretitle }}</p>\n }\n @if (title) {\n <h2 class=\"banner__heading\">{{ title }}</h2>\n }\n @if (subtitle) {\n <p class=\"banner__text\">{{ subtitle }}</p>\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 !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\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: ["@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: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: AutoImageZoomWrapperDirective, selector: "img[ngSrc], img[src]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9383
9390
|
}
|
|
9384
9391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTopSliderComponent, decorators: [{
|
|
9385
9392
|
type: Component,
|
|
@@ -9390,7 +9397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9390
9397
|
PuroActiveModalDirective,
|
|
9391
9398
|
NgOptimizedImage,
|
|
9392
9399
|
AutoImageZoomWrapperDirective
|
|
9393
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ?
|
|
9400
|
+
], 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\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 <div class=\"js-banner-slider\">\n @for (image of resolvedImages; track $index) {\n <div class=\"banner__item\">\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"banner__image\"\n [width]=\"image.width\"\n [height]=\"image.height\"\n fetchpriority=\"high\"\n priority\n />\n </div>\n }\n </div>\n }\n }\n @if (mainTitle) {\n <h1 class=\"banner__title\">\n <span>{{ mainTitle }}</span>\n </h1>\n }\n <div class=\"banner__content\">\n @if (pretitle) {\n <p class=\"banner__text\">{{ pretitle }}</p>\n }\n @if (title) {\n <h2 class=\"banner__heading\">{{ title }}</h2>\n }\n @if (subtitle) {\n <p class=\"banner__text\">{{ subtitle }}</p>\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 !== 5) {\n <ng-container [ngTemplateOutlet]=\"engine\"></ng-container>\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: ["@media (min-width: 1024px){.banner__actions{padding-bottom:5.5rem}}\n"] }]
|
|
9394
9401
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { engine: [{
|
|
9395
9402
|
type: Input
|
|
9396
9403
|
}], title: [{
|