ctt-puro 0.45.6 → 0.45.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-info-list/puro-info-list.component.mjs +3 -3
- package/esm2022/lib/components/puro-slider3col/puro-slider3col.component.mjs +3 -3
- package/esm2022/lib/components/puro-timeline/puro-timeline.component.mjs +3 -3
- package/esm2022/lib/directives/puro-nav-sticky/puro-nav-sticky.directive.mjs +38 -21
- package/fesm2022/ctt-puro.mjs +43 -26
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -1192,7 +1192,6 @@ class PuroNavStickyDirective {
|
|
|
1192
1192
|
return;
|
|
1193
1193
|
this.banner = document.querySelector('.banner');
|
|
1194
1194
|
this.isInitialized = true;
|
|
1195
|
-
// Recalcular al finalizar cada navegación
|
|
1196
1195
|
this.sub = this.router.events
|
|
1197
1196
|
.pipe(filter((e) => e instanceof NavigationEnd))
|
|
1198
1197
|
.subscribe(() => this.updateStickyState());
|
|
@@ -1212,7 +1211,7 @@ class PuroNavStickyDirective {
|
|
|
1212
1211
|
isMobile() {
|
|
1213
1212
|
if (!isPlatformBrowser(this.platformId))
|
|
1214
1213
|
return false;
|
|
1215
|
-
return window.matchMedia('(max-width: 1280px)').matches;
|
|
1214
|
+
return window.matchMedia('(max-width: 1280px)').matches;
|
|
1216
1215
|
}
|
|
1217
1216
|
updateStickyState() {
|
|
1218
1217
|
if (!isPlatformBrowser(this.platformId) || !this.isInitialized)
|
|
@@ -1221,34 +1220,52 @@ class PuroNavStickyDirective {
|
|
|
1221
1220
|
document.documentElement.scrollTop ||
|
|
1222
1221
|
document.body.scrollTop ||
|
|
1223
1222
|
0;
|
|
1223
|
+
const header = document.querySelector('header.header');
|
|
1224
|
+
/**
|
|
1225
|
+
* 🔵 DETECCIÓN NUEVA:
|
|
1226
|
+
* Header tocando el borde superior del viewport
|
|
1227
|
+
*/
|
|
1228
|
+
if (header && header.getBoundingClientRect().top <= 0) {
|
|
1229
|
+
document.body.classList.add('nav-sticky--top');
|
|
1230
|
+
}
|
|
1231
|
+
else {
|
|
1232
|
+
document.body.classList.remove('nav-sticky--top');
|
|
1233
|
+
}
|
|
1234
|
+
/**
|
|
1235
|
+
* 🔵 MODO DINÁMICO (HOTELS)
|
|
1236
|
+
*/
|
|
1224
1237
|
if (this.isDynamic) {
|
|
1225
|
-
// 🔹 Modo dinámico: en función del scroll
|
|
1226
1238
|
if (y > this.mobileHeader) {
|
|
1227
1239
|
document.body.classList.add('nav-sticky', 'mobile-sticky');
|
|
1228
1240
|
}
|
|
1229
1241
|
else {
|
|
1230
1242
|
document.body.classList.remove('nav-sticky', 'mobile-sticky');
|
|
1231
1243
|
}
|
|
1244
|
+
return;
|
|
1232
1245
|
}
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
else {
|
|
1241
|
-
document.body.classList.remove('nav-sticky');
|
|
1242
|
-
}
|
|
1243
|
-
document.body.classList.remove('mobile-sticky');
|
|
1246
|
+
/**
|
|
1247
|
+
* 🔵 Desktop con banner
|
|
1248
|
+
*/
|
|
1249
|
+
if (this.banner) {
|
|
1250
|
+
const bannerHeight = this.getOuterHeight(this.banner);
|
|
1251
|
+
if (y >= bannerHeight) {
|
|
1252
|
+
document.body.classList.add('nav-sticky');
|
|
1244
1253
|
}
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
document.body.classList.remove('mobile-sticky');
|
|
1248
|
-
// 🔹 Mobile sin banner: siempre mobile-sticky
|
|
1249
|
-
if (this.isMobile()) {
|
|
1250
|
-
document.body.classList.add('nav-sticky', 'mobile-sticky');
|
|
1254
|
+
else {
|
|
1255
|
+
document.body.classList.remove('nav-sticky');
|
|
1251
1256
|
}
|
|
1257
|
+
document.body.classList.remove('mobile-sticky');
|
|
1258
|
+
}
|
|
1259
|
+
/**
|
|
1260
|
+
* 🔵 Desktop sin banner
|
|
1261
|
+
*/
|
|
1262
|
+
document.body.classList.add('nav-sticky');
|
|
1263
|
+
document.body.classList.remove('mobile-sticky');
|
|
1264
|
+
/**
|
|
1265
|
+
* 🔵 Mobile sin banner
|
|
1266
|
+
*/
|
|
1267
|
+
if (this.isMobile()) {
|
|
1268
|
+
document.body.classList.add('nav-sticky', 'mobile-sticky');
|
|
1252
1269
|
}
|
|
1253
1270
|
}
|
|
1254
1271
|
getOuterHeight(element) {
|
|
@@ -7184,11 +7201,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7184
7201
|
|
|
7185
7202
|
class PuroInfoListComponent {
|
|
7186
7203
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoListComponent, isStandalone: true, selector: "lib-puro-info-list", inputs: { img: "img", backgroundImg: "backgroundImg", smallImg: "smallImg", title: "title", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase
|
|
7204
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoListComponent, isStandalone: true, selector: "lib-puro-info-list", inputs: { img: "img", backgroundImg: "backgroundImg", smallImg: "smallImg", title: "title", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase}@media (min-width: 1024px){.info-list__item{justify-content:flex-start}}.info-list__item__img{position:absolute;left:-30px}@media (max-width: 1024px){.info-list__item__img{position:relative;left:30px}}:host ::ng-deep .info-list__title{width:100%;transition:all .5s}@media (max-width: 1024px){:host ::ng-deep .info-list__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem;margin-bottom:2rem}}@media (min-width: 1024px){:host ::ng-deep .info-list__title{font-size:5rem;line-height:1.392;letter-spacing:.1rem;margin-bottom:3rem}}:host ::ng-deep .info-list__image--bg{animation:fan-rotate 14s ease-in-out infinite;transform-origin:center bottom;display:block}@keyframes fan-rotate{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(6deg) translateY(-4px)}50%{transform:rotate(-6deg) translateY(4px)}75%{transform:rotate(3deg) translateY(-2px)}}.info-list__wrapper{width:100%!important;height:auto!important;aspect-ratio:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
|
|
7188
7205
|
}
|
|
7189
7206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoListComponent, decorators: [{
|
|
7190
7207
|
type: Component,
|
|
7191
|
-
args: [{ selector: 'lib-puro-info-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase
|
|
7208
|
+
args: [{ selector: 'lib-puro-info-list', standalone: true, imports: [CommonModule, NgOptimizedImage, PuroDynamicHeadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"webmap generalMargin\">\n <div class=\"webmap__inner info-list\">\n <div class=\"info-list__wrapper\">\n @if (backgroundImg) {\n <img\n class=\"info-list__image--bg\"\n [ngSrc]=\"backgroundImg.src\"\n [alt]=\"backgroundImg.alt\"\n width=\"685\"\n height=\"685\"\n decoding=\"async\"\n />\n }\n @if (img) {\n <img\n class=\"info-list__image\"\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"575\"\n height=\"690\"\n decoding=\"async\"\n />\n }\n </div>\n\n <div class=\"info-list__content--wrapper\">\n <div class=\"info-list__content\">\n @if (title) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.title || 'h2'\"\n cssClass=\"info-list__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <p class=\"info-list__paragraph\">\n {{ description }}\n </p>\n }\n <ul class=\"info-list__list\">\n @for (item of items || []; track $index) {\n <li class=\"info-list__item\">\n @if (smallImg) {\n <img\n [ngSrc]=\"smallImg.src\"\n [alt]=\"smallImg.alt\"\n class=\"info-list__item__img\"\n width=\"60\"\n height=\"60\"\n decoding=\"async\"\n />\n }\n <span class=\"info-list__paragraph\">\n {{ item }}\n </span>\n </li>\n }\n </ul>\n </div>\n </div>\n </div>\n</section>\n", styles: [".info-list{display:flex;justify-content:space-between;flex-direction:column;transition:all .5s}@media (min-width: 1280px){.info-list{flex-direction:row}}.info-list>*{flex:1 1 50%}@media (min-width: 1280px){.info-list__content{padding-block:10rem 0rem;text-align:start}}@media (max-width: 1280px){.info-list__content{text-align:center;margin-top:2rem}}.info-list__paragraph{margin-inline:0rem!important;display:inline-block!important;color:#616160!important;transition:all .5s}.info-list li.info-list__item span.info-list__paragraph{margin-bottom:0rem!important}.info-list__wrapper{position:relative;display:flex;justify-content:flex-start}@media (max-width: 1020px){.info-list__wrapper{justify-content:center}}.info-list__image{aspect-ratio:677/813;-o-object-fit:cover;object-fit:cover;width:100%;border-top-left-radius:500px;border-top-right-radius:500px}.info-list__image--bg{position:absolute;z-index:-1}@media (max-width: 1024px){.info-list__image--bg{display:none}}@media (min-width: 1024px){.info-list__image--bg{top:-200px;right:-200px}}@media (min-width: 1280px){.info-list__image--bg{top:-175px;right:-190px}}.info-list__list{width:100%;padding-top:10px;margin:0 auto;display:flex;text-align:center;flex-direction:column;align-items:center}@media (max-width: 1280px){.info-list__list{padding-top:0rem;padding-left:0}}@media (min-width: 1280px){.info-list__list{padding-bottom:6rem;padding-top:4rem;padding-left:3rem;align-items:start}}.info-list__item{display:flex;align-items:center;position:relative;padding-bottom:15px;text-transform:uppercase}@media (min-width: 1024px){.info-list__item{justify-content:flex-start}}.info-list__item__img{position:absolute;left:-30px}@media (max-width: 1024px){.info-list__item__img{position:relative;left:30px}}:host ::ng-deep .info-list__title{width:100%;transition:all .5s}@media (max-width: 1024px){:host ::ng-deep .info-list__title{font-size:2.4rem;line-height:1.6666666667;letter-spacing:.048rem;margin-bottom:2rem}}@media (min-width: 1024px){:host ::ng-deep .info-list__title{font-size:5rem;line-height:1.392;letter-spacing:.1rem;margin-bottom:3rem}}:host ::ng-deep .info-list__image--bg{animation:fan-rotate 14s ease-in-out infinite;transform-origin:center bottom;display:block}@keyframes fan-rotate{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(6deg) translateY(-4px)}50%{transform:rotate(-6deg) translateY(4px)}75%{transform:rotate(3deg) translateY(-2px)}}.info-list__wrapper{width:100%!important;height:auto!important;aspect-ratio:auto!important}\n"] }]
|
|
7192
7209
|
}], propDecorators: { img: [{
|
|
7193
7210
|
type: Input
|
|
7194
7211
|
}], backgroundImg: [{
|
|
@@ -8047,11 +8064,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8047
8064
|
|
|
8048
8065
|
class PuroSlider3colComponent {
|
|
8049
8066
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroSlider3colComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroSlider3colComponent, isStandalone: true, selector: "lib-puro-slider3col", inputs: { items: "items", title: "title", button: "button" }, ngImport: i0, template: "@if (items && items.length > 0) {\n <section\n class=\"events js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-events-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_centermode=\"true\"\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 <span class=\"events__title\">{{ title }}</span>\n }\n <div class=\"events__inner relative\">\n <div class=\"events__container\">\n <div\n class=\"js-events-slider events__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n <div>\n <div class=\"events__box\">\n @if (item.title) {\n <div class=\"events__heading photo\">\n {{ item.title }}\n </div>\n }\n <div class=\"events__inner\">\n <div\n class=\"events__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"events__graphic--img\"\n width=\"509\"\n height=\"510\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"events__info\">\n @if (item.location) {\n <span
|
|
8067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroSlider3colComponent, isStandalone: true, selector: "lib-puro-slider3col", inputs: { items: "items", title: "title", button: "button" }, ngImport: i0, template: "@if (items && items.length > 0) {\n <section\n class=\"events js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-events-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_centermode=\"true\"\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 <span class=\"events__title\">{{ title }}</span>\n }\n <div class=\"events__inner relative\">\n <div class=\"events__container\">\n <div\n class=\"js-events-slider events__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n <div>\n <div class=\"events__box\">\n @if (item.title) {\n <div class=\"events__heading photo\">\n {{ item.title }}\n </div>\n }\n <div class=\"events__inner\">\n <div\n class=\"events__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"events__graphic--img\"\n width=\"509\"\n height=\"510\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"events__info\">\n @if (item.location) {\n <span\n class=\"events__name __subHeading\"\n >{{ item.location }}</span\n >\n }\n @if (item.icon) {\n <div class=\"events__icon\">\n <i\n class=\"icon-{{ item.icon }}\"\n ></i>\n </div>\n }\n @if (item.date) {\n <span class=\"events__date\">{{\n item.date | date: 'dd-MM-yyyy'\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__secondary--outline\"\n [attr.aria-label]=\"\n item.link.label\n \"\n ><span>{{\n item.link.label\n }}</span></a\n >\n }\n @if (item.button) {\n <a\n [href]=\"item.button.url\"\n [linkType]=\"item.button.url\"\n class=\"btn btn__secondary\"\n [attr.aria-label]=\"\n item.button.label\n \"\n >\n <span>{{\n item.button.label\n }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\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 </section>\n}\n", styles: [".events__icon i{width:47px;height:47px;background-color:#fff}@media (min-width: 1366px){.events__container{max-width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { 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 }); }
|
|
8051
8068
|
}
|
|
8052
8069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroSlider3colComponent, decorators: [{
|
|
8053
8070
|
type: Component,
|
|
8054
|
-
args: [{ selector: 'lib-puro-slider3col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items && items.length > 0) {\n <section\n class=\"events js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-events-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_centermode=\"true\"\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 <span class=\"events__title\">{{ title }}</span>\n }\n <div class=\"events__inner relative\">\n <div class=\"events__container\">\n <div\n class=\"js-events-slider events__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n <div>\n <div class=\"events__box\">\n @if (item.title) {\n <div class=\"events__heading photo\">\n {{ item.title }}\n </div>\n }\n <div class=\"events__inner\">\n <div\n class=\"events__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"events__graphic--img\"\n width=\"509\"\n height=\"510\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"events__info\">\n @if (item.location) {\n <span
|
|
8071
|
+
args: [{ selector: 'lib-puro-slider3col', standalone: true, imports: [CommonModule, PuroLinkTypeDirective, PuroSliderDirective, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items && items.length > 0) {\n <section\n class=\"events js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-events-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"false\"\n data-slider_centermode=\"true\"\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 <span class=\"events__title\">{{ title }}</span>\n }\n <div class=\"events__inner relative\">\n <div class=\"events__container\">\n <div\n class=\"js-events-slider events__slider js-slider_fix-arrows\"\n >\n @for (item of items || []; track $index) {\n <div>\n <div class=\"events__box\">\n @if (item.title) {\n <div class=\"events__heading photo\">\n {{ item.title }}\n </div>\n }\n <div class=\"events__inner\">\n <div\n class=\"events__graphic js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"events__graphic--img\"\n width=\"509\"\n height=\"510\"\n [alt]=\"item.img.alt\"\n decoding=\"async\"\n />\n }\n </div>\n <div class=\"events__info\">\n @if (item.location) {\n <span\n class=\"events__name __subHeading\"\n >{{ item.location }}</span\n >\n }\n @if (item.icon) {\n <div class=\"events__icon\">\n <i\n class=\"icon-{{ item.icon }}\"\n ></i>\n </div>\n }\n @if (item.date) {\n <span class=\"events__date\">{{\n item.date | date: 'dd-MM-yyyy'\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__secondary--outline\"\n [attr.aria-label]=\"\n item.link.label\n \"\n ><span>{{\n item.link.label\n }}</span></a\n >\n }\n @if (item.button) {\n <a\n [href]=\"item.button.url\"\n [linkType]=\"item.button.url\"\n class=\"btn btn__secondary\"\n [attr.aria-label]=\"\n item.button.label\n \"\n >\n <span>{{\n item.button.label\n }}</span>\n </a>\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\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 </section>\n}\n", styles: [".events__icon i{width:47px;height:47px;background-color:#fff}@media (min-width: 1366px){.events__container{max-width:95%}}\n"] }]
|
|
8055
8072
|
}], propDecorators: { items: [{
|
|
8056
8073
|
type: Input
|
|
8057
8074
|
}], title: [{
|
|
@@ -8230,7 +8247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8230
8247
|
|
|
8231
8248
|
class PuroTimelineComponent {
|
|
8232
8249
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTimelineComponent, isStandalone: true, selector: "lib-puro-timeline", inputs: { title: "title", pretitle: "pretitle", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-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=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__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=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span
|
|
8250
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroTimelineComponent, isStandalone: true, selector: "lib-puro-timeline", inputs: { title: "title", pretitle: "pretitle", description: "description", items: "items", tags: "tags", textColors: "textColors" }, ngImport: i0, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-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=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__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=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8234
8251
|
}
|
|
8235
8252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroTimelineComponent, decorators: [{
|
|
8236
8253
|
type: Component,
|
|
@@ -8239,7 +8256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8239
8256
|
PuroSliderDirective,
|
|
8240
8257
|
NgOptimizedImage,
|
|
8241
8258
|
PuroDynamicHeadingComponent,
|
|
8242
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-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=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__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=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span
|
|
8259
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"timeline js-active-slider generalMargin\"\n [puroSlider]=\"items\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-timeline-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=\"timeline__inner moments--withTopGraphic\">\n <div class=\"timeline__contentText\">\n @if (pretitle) {\n <lib-puro-dynamic-heading\n [tag]=\"tags?.pretitle || 'span'\"\n cssClass=\"timeline__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=\"timeline__heading\"\n [color]=\"textColors?.title\"\n [content]=\"title\"\n ></lib-puro-dynamic-heading>\n }\n @if (description) {\n <div class=\"timeline__paragraph\">\n <p>\n {{ description }}\n </p>\n </div>\n }\n </div>\n @if (items && items.length) {\n <div class=\"timeline__years\">\n @for (item of items; track $index) {\n <div class=\"timeline__yearItem\">\n @if (item.year) {\n <span class=\"timeline__yearItem--year\">{{\n item.year\n }}</span>\n }\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p class=\"timeline__card--text __paragraph\">\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"timeline__cardSlider\">\n <div class=\"timeline__cardSlider--inner relative\">\n <div class=\"js-timeline-slider\">\n @for (item of items; track $index) {\n <div class=\"timeline__card\">\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n class=\"timeline__card--img\"\n [alt]=\"item.img.alt\"\n width=\"300\"\n height=\"225\"\n decoding=\"async\"\n />\n }\n <div class=\"timeline__card--body\">\n @if (item.year) {\n <span\n class=\"timeline__card--year __subHeading\"\n >{{ item.year }}</span\n >\n }\n @if (item.description) {\n <p\n class=\"timeline__card--text __paragraph\"\n >\n {{ item.description }}\n </p>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n </div>\n }\n </div>\n</section>\n" }]
|
|
8243
8260
|
}], propDecorators: { title: [{
|
|
8244
8261
|
type: Input
|
|
8245
8262
|
}], pretitle: [{
|