ctt-puro 0.66.11 → 0.67.1
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 +17 -6
- package/fesm2022/ctt-puro.mjs +24 -15
- 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
|
@@ -4382,7 +4382,8 @@ class MapperService {
|
|
|
4382
4382
|
(hotel.texts?.description
|
|
4383
4383
|
? ' <br> ' + hotel.texts.description
|
|
4384
4384
|
: ''),
|
|
4385
|
-
img: this.getImageResponsive(hotel.multimedia?.
|
|
4385
|
+
img: this.getImageResponsive(hotel.multimedia?.filter((img) => img?.tags?.some((tag) => tag === 'TopSliderMovil' ||
|
|
4386
|
+
tag?.name === 'TopSliderMovil'))?.[0]),
|
|
4386
4387
|
}));
|
|
4387
4388
|
}
|
|
4388
4389
|
if (destinations) {
|
|
@@ -4922,7 +4923,8 @@ class MapperService {
|
|
|
4922
4923
|
const title = tr?.name ?? child?.name ?? child?.name_identifier;
|
|
4923
4924
|
const pretitle = dest?.name;
|
|
4924
4925
|
const button = (Utils.mapButtons(this.siteId(), child?.hotels?.[0]?.links?.[0]) ?? [])[0];
|
|
4925
|
-
const imgCover = child?.hotels?.[0]?.multimedia?.
|
|
4926
|
+
const imgCover = child?.hotels?.[0]?.multimedia?.filter((img) => img?.tags?.some((tag) => tag === 'TopSliderMovil' ||
|
|
4927
|
+
tag?.name === 'TopSliderMovil'))?.[0];
|
|
4926
4928
|
const img = this.getImageResponsive(imgCover);
|
|
4927
4929
|
return {
|
|
4928
4930
|
title,
|
|
@@ -5027,7 +5029,8 @@ class MapperService {
|
|
|
5027
5029
|
// hotel?.buttons?.filter((btn: any) => !!btn?.linkValue)
|
|
5028
5030
|
// );
|
|
5029
5031
|
const links = Utils.mapButtons(hotel?.links?.[0]?.siteId ?? this.siteId(), hotel?.links);
|
|
5030
|
-
const firstImg = hotel?.multimedia?.
|
|
5032
|
+
const firstImg = hotel?.multimedia?.filter((img) => img?.tags?.some((tag) => tag === 'TopSliderMovil' ||
|
|
5033
|
+
tag?.name === 'TopSliderMovil'))?.[0];
|
|
5031
5034
|
const img = this.getImageResponsive(firstImg);
|
|
5032
5035
|
return {
|
|
5033
5036
|
title,
|
|
@@ -5280,8 +5283,16 @@ class MapperService {
|
|
|
5280
5283
|
}
|
|
5281
5284
|
mapTopSlider(props, actions) {
|
|
5282
5285
|
const { texts, multimedia, video } = props;
|
|
5283
|
-
const images = this.getArrayImageResponsive(multimedia?.images || multimedia?.multimedia || multimedia?.imagenes)
|
|
5284
|
-
|
|
5286
|
+
const images = this.getArrayImageResponsive(multimedia?.images || multimedia?.multimedia || multimedia?.imagenes)?.map((img) => ({
|
|
5287
|
+
...img,
|
|
5288
|
+
width: 1920,
|
|
5289
|
+
height: 980,
|
|
5290
|
+
}));
|
|
5291
|
+
const imagesMobile = this.getArrayImageResponsive(multimedia?.imagenesmobile || [])?.map((img) => ({
|
|
5292
|
+
...img,
|
|
5293
|
+
width: 768,
|
|
5294
|
+
height: 1000,
|
|
5295
|
+
}));
|
|
5285
5296
|
const videoData = video?.src
|
|
5286
5297
|
? {
|
|
5287
5298
|
source: video.src,
|
|
@@ -9343,14 +9354,6 @@ class PuroTopSliderComponent {
|
|
|
9343
9354
|
constructor(sanitizer) {
|
|
9344
9355
|
this.sanitizer = sanitizer;
|
|
9345
9356
|
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
9357
|
}
|
|
9355
9358
|
isYouTube(url) {
|
|
9356
9359
|
return /(?:youtube\.com|youtu\.be)/i.test(url ?? '');
|
|
@@ -9372,6 +9375,12 @@ class PuroTopSliderComponent {
|
|
|
9372
9375
|
get isMobile() {
|
|
9373
9376
|
return this.screenSizer.width <= 768;
|
|
9374
9377
|
}
|
|
9378
|
+
get resolvedImages() {
|
|
9379
|
+
if (this.isMobile && this.imagesMobile?.length) {
|
|
9380
|
+
return this.imagesMobile;
|
|
9381
|
+
}
|
|
9382
|
+
return this.images;
|
|
9383
|
+
}
|
|
9375
9384
|
get showVideo() {
|
|
9376
9385
|
return !!this.video && !this.isMobile;
|
|
9377
9386
|
}
|
|
@@ -9379,7 +9388,7 @@ class PuroTopSliderComponent {
|
|
|
9379
9388
|
return !this.showVideo;
|
|
9380
9389
|
}
|
|
9381
9390
|
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 ?
|
|
9391
|
+
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
9392
|
}
|
|
9384
9393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTopSliderComponent, decorators: [{
|
|
9385
9394
|
type: Component,
|
|
@@ -9390,7 +9399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9390
9399
|
PuroActiveModalDirective,
|
|
9391
9400
|
NgOptimizedImage,
|
|
9392
9401
|
AutoImageZoomWrapperDirective
|
|
9393
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"banner\"\n style=\"background: #f9f5ed\"\n [class.js-active-slider]=\"shouldUseSlider\"\n [puroSlider]=\"shouldUseSlider ?
|
|
9402
|
+
], 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
9403
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { engine: [{
|
|
9395
9404
|
type: Input
|
|
9396
9405
|
}], title: [{
|