@lluc_llull/ui-lib 0.33.10 → 0.34.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/README.md +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-asymmetric-media.mjs +85 -28
- package/fesm2022/lluc_llull-ui-lib-content-asymmetric-media.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs +81 -30
- package/fesm2022/lluc_llull-ui-lib-content-category-progress.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-columns-media-stacked.mjs +90 -34
- package/fesm2022/lluc_llull-ui-lib-content-columns-media-stacked.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs +109 -37
- package/fesm2022/lluc_llull-ui-lib-content-contact-minimal.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-content-document.mjs +58 -26
- package/fesm2022/lluc_llull-ui-lib-content-content-document.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-hero-section.mjs +139 -110
- package/fesm2022/lluc_llull-ui-lib-content-hero-section.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-media-intro.mjs +91 -34
- package/fesm2022/lluc_llull-ui-lib-content-media-intro.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs +118 -76
- package/fesm2022/lluc_llull-ui-lib-content-media-split.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs +99 -44
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-grid.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-parallax.mjs +109 -57
- package/fesm2022/lluc_llull-ui-lib-content-mosaic-parallax.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs +100 -37
- package/fesm2022/lluc_llull-ui-lib-content-section-intro.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs +133 -61
- package/fesm2022/lluc_llull-ui-lib-content-split-previewer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs +99 -37
- package/fesm2022/lluc_llull-ui-lib-content-split-showcase.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs +61 -29
- package/fesm2022/lluc_llull-ui-lib-content-stacked-rows.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-content.mjs +1286 -502
- package/fesm2022/lluc_llull-ui-lib-content.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-directives.mjs +383 -262
- package/fesm2022/lluc_llull-ui-lib-directives.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-effects.mjs +187 -150
- package/fesm2022/lluc_llull-ui-lib-effects.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-enums.mjs +8 -12
- package/fesm2022/lluc_llull-ui-lib-enums.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-feedback-404.mjs +97 -34
- package/fesm2022/lluc_llull-ui-lib-feedback-404.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-feedback.mjs +97 -34
- package/fesm2022/lluc_llull-ui-lib-feedback.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-columns-footer.mjs +65 -27
- package/fesm2022/lluc_llull-ui-lib-footers-columns-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-legal-footer.mjs +74 -37
- package/fesm2022/lluc_llull-ui-lib-footers-legal-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-links-footer.mjs +59 -24
- package/fesm2022/lluc_llull-ui-lib-footers-links-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-social-footer.mjs +95 -32
- package/fesm2022/lluc_llull-ui-lib-footers-social-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers-visual-footer.mjs +84 -45
- package/fesm2022/lluc_llull-ui-lib-footers-visual-footer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-footers.mjs +354 -125
- package/fesm2022/lluc_llull-ui-lib-footers.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs +153 -78
- package/fesm2022/lluc_llull-ui-lib-headers-header-clear.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs +153 -78
- package/fesm2022/lluc_llull-ui-lib-headers-header-mobile.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-headers.mjs +296 -142
- package/fesm2022/lluc_llull-ui-lib-headers.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-interfaces.mjs +0 -4
- package/fesm2022/lluc_llull-ui-lib-mapper.mjs +242 -264
- package/fesm2022/lluc_llull-ui-lib-mapper.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-modals.mjs +163 -65
- package/fesm2022/lluc_llull-ui-lib-modals.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-screen-sizer.mjs +106 -97
- package/fesm2022/lluc_llull-ui-lib-screen-sizer.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-shared.mjs +303 -148
- package/fesm2022/lluc_llull-ui-lib-shared.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-sliders.mjs +72 -52
- package/fesm2022/lluc_llull-ui-lib-sliders.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-theme.mjs +78 -80
- package/fesm2022/lluc_llull-ui-lib-theme.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib-utils.mjs +42 -64
- package/fesm2022/lluc_llull-ui-lib-utils.mjs.map +1 -1
- package/fesm2022/lluc_llull-ui-lib.mjs +42 -27
- package/fesm2022/lluc_llull-ui-lib.mjs.map +1 -1
- package/package.json +86 -85
- package/types/lluc_llull-ui-lib-content-asymmetric-media.d.ts +21 -0
- package/types/lluc_llull-ui-lib-content-category-progress.d.ts +34 -0
- package/types/lluc_llull-ui-lib-content-columns-media-stacked.d.ts +33 -0
- package/types/lluc_llull-ui-lib-content-contact-minimal.d.ts +39 -0
- package/types/lluc_llull-ui-lib-content-content-document.d.ts +24 -0
- package/types/lluc_llull-ui-lib-content-hero-section.d.ts +62 -0
- package/types/lluc_llull-ui-lib-content-media-intro.d.ts +33 -0
- package/types/lluc_llull-ui-lib-content-media-split.d.ts +36 -0
- package/types/lluc_llull-ui-lib-content-mosaic-grid.d.ts +27 -0
- package/types/lluc_llull-ui-lib-content-mosaic-parallax.d.ts +35 -0
- package/types/lluc_llull-ui-lib-content-section-intro.d.ts +33 -0
- package/types/lluc_llull-ui-lib-content-split-previewer.d.ts +47 -0
- package/types/lluc_llull-ui-lib-content-split-showcase.d.ts +43 -0
- package/types/lluc_llull-ui-lib-content-stacked-rows.d.ts +30 -0
- package/types/lluc_llull-ui-lib-content.d.ts +471 -0
- package/types/lluc_llull-ui-lib-directives.d.ts +93 -0
- package/types/lluc_llull-ui-lib-effects.d.ts +50 -0
- package/types/lluc_llull-ui-lib-enums.d.ts +7 -0
- package/types/lluc_llull-ui-lib-feedback-404.d.ts +33 -0
- package/types/lluc_llull-ui-lib-feedback.d.ts +33 -0
- package/types/lluc_llull-ui-lib-footers-columns-footer.d.ts +30 -0
- package/types/lluc_llull-ui-lib-footers-legal-footer.d.ts +40 -0
- package/types/lluc_llull-ui-lib-footers-links-footer.d.ts +15 -0
- package/types/lluc_llull-ui-lib-footers-social-footer.d.ts +27 -0
- package/types/lluc_llull-ui-lib-footers-visual-footer.d.ts +57 -0
- package/types/lluc_llull-ui-lib-footers.d.ts +161 -0
- package/types/lluc_llull-ui-lib-headers-header-clear.d.ts +68 -0
- package/types/lluc_llull-ui-lib-headers-header-mobile.d.ts +68 -0
- package/types/lluc_llull-ui-lib-headers.d.ts +132 -0
- package/types/lluc_llull-ui-lib-interfaces.d.ts +92 -0
- package/types/lluc_llull-ui-lib-mapper.d.ts +40 -0
- package/types/lluc_llull-ui-lib-modals.d.ts +47 -0
- package/types/lluc_llull-ui-lib-screen-sizer.d.ts +34 -0
- package/types/lluc_llull-ui-lib-shared.d.ts +99 -0
- package/types/lluc_llull-ui-lib-sliders.d.ts +17 -0
- package/types/lluc_llull-ui-lib-theme.d.ts +16 -0
- package/{utils/utils.d.ts → types/lluc_llull-ui-lib-utils.d.ts} +2 -2
- package/types/lluc_llull-ui-lib.d.ts +5 -0
- package/content/asymmetric-media/asymmetric-media.component.d.ts +0 -8
- package/content/asymmetric-media/asymmetric-media.interface.d.ts +0 -5
- package/content/asymmetric-media/index.d.ts +0 -2
- package/content/category-progress/category-progress.component.d.ts +0 -16
- package/content/category-progress/category-progress.interface.d.ts +0 -6
- package/content/category-progress/index.d.ts +0 -2
- package/content/columns-media-stacked/columns-media-stacked.component.d.ts +0 -10
- package/content/columns-media-stacked/columns-media-stacked.interface.d.ts +0 -7
- package/content/columns-media-stacked/index.d.ts +0 -2
- package/content/contact-minimal/contact-minimal.component.d.ts +0 -11
- package/content/contact-minimal/contact-minimal.interface.d.ts +0 -8
- package/content/contact-minimal/index.d.ts +0 -2
- package/content/content-document/content-document.component.d.ts +0 -11
- package/content/content-document/content-document.interface.d.ts +0 -5
- package/content/content-document/index.d.ts +0 -2
- package/content/hero-section/hero-section.component.d.ts +0 -19
- package/content/hero-section/hero-section.interface.d.ts +0 -11
- package/content/hero-section/hero-section.stories.d.ts +0 -7
- package/content/hero-section/index.d.ts +0 -3
- package/content/index.d.ts +0 -14
- package/content/media-intro/index.d.ts +0 -2
- package/content/media-intro/media-intro.component.d.ts +0 -10
- package/content/media-intro/media-intro.interface.d.ts +0 -7
- package/content/media-split/index.d.ts +0 -2
- package/content/media-split/media-split.component.d.ts +0 -18
- package/content/media-split/media-split.interface.d.ts +0 -6
- package/content/mosaic-grid/index.d.ts +0 -2
- package/content/mosaic-grid/mosaic-grid.component.d.ts +0 -14
- package/content/mosaic-grid/mosaic-grid.interface.d.ts +0 -5
- package/content/mosaic-parallax/index.d.ts +0 -2
- package/content/mosaic-parallax/mosaic-parallax.component.d.ts +0 -17
- package/content/mosaic-parallax/mosaic-parallax.interface.d.ts +0 -6
- package/content/section-intro/index.d.ts +0 -2
- package/content/section-intro/section-intro.component.d.ts +0 -11
- package/content/section-intro/section-intro.interface.d.ts +0 -2
- package/content/split-previewer/index.d.ts +0 -2
- package/content/split-previewer/split-previewer.component.d.ts +0 -24
- package/content/split-previewer/split-previewer.interface.d.ts +0 -8
- package/content/split-showcase/index.d.ts +0 -2
- package/content/split-showcase/split-showcase.component.d.ts +0 -15
- package/content/split-showcase/split-showcase.interface.d.ts +0 -9
- package/content/stacked-rows/index.d.ts +0 -2
- package/content/stacked-rows/stacked-rows.component.d.ts +0 -12
- package/content/stacked-rows/stacked-rows.interface.d.ts +0 -6
- package/directives/header-scroll.directive.d.ts +0 -8
- package/directives/highlight.directive.d.ts +0 -14
- package/directives/index.d.ts +0 -4
- package/directives/link-type.directive.d.ts +0 -26
- package/directives/scroll-reveal.directive.d.ts +0 -15
- package/effects/dynamic-background/dynamic-background.component.d.ts +0 -27
- package/effects/dynamic-background/effects/dynamic-effect.interface.d.ts +0 -6
- package/effects/dynamic-background/effects/effect-registry.d.ts +0 -3
- package/effects/dynamic-background/effects/sphere-deform/sphere-deform.effect.d.ts +0 -13
- package/effects/dynamic-background/index.d.ts +0 -1
- package/effects/index.d.ts +0 -1
- package/enums/index.d.ts +0 -1
- package/enums/link-type.enum.d.ts +0 -7
- package/feedback/404/404.component.d.ts +0 -10
- package/feedback/404/404.inteface.d.ts +0 -7
- package/feedback/404/index.d.ts +0 -2
- package/feedback/index.d.ts +0 -1
- package/fesm2022/lluc_llull-ui-lib-interfaces.mjs.map +0 -1
- package/footers/columns-footer/columns-footer.component.d.ts +0 -17
- package/footers/columns-footer/columns-footer.interface.d.ts +0 -5
- package/footers/columns-footer/index.d.ts +0 -2
- package/footers/index.d.ts +0 -5
- package/footers/legal-footer/index.d.ts +0 -2
- package/footers/legal-footer/legal-footer.component.d.ts +0 -12
- package/footers/legal-footer/legal-footer.interface.d.ts +0 -9
- package/footers/links-footer/index.d.ts +0 -2
- package/footers/links-footer/links-footer.component.d.ts +0 -7
- package/footers/links-footer/links-footer.interface.d.ts +0 -4
- package/footers/social-footer/index.d.ts +0 -2
- package/footers/social-footer/social-footer.component.d.ts +0 -9
- package/footers/social-footer/social-footer.interface.d.ts +0 -6
- package/footers/visual-footer/index.d.ts +0 -2
- package/footers/visual-footer/visual-footer.component.d.ts +0 -14
- package/footers/visual-footer/visual-footer.interface.d.ts +0 -11
- package/headers/header-clear/header-clear.component.d.ts +0 -28
- package/headers/header-clear/header-clear.interface.d.ts +0 -9
- package/headers/header-clear/index.d.ts +0 -2
- package/headers/header-mobile/header-mobile.component.d.ts +0 -28
- package/headers/header-mobile/header-mobile.interface.d.ts +0 -9
- package/headers/header-mobile/index.d.ts +0 -2
- package/headers/index.d.ts +0 -2
- package/index.d.ts +0 -5
- package/interfaces/index.d.ts +0 -8
- package/interfaces/page-config.interface.d.ts +0 -22
- package/interfaces/site-config.interface.d.ts +0 -21
- package/interfaces/ui-lib-address.interface.d.ts +0 -7
- package/interfaces/ui-lib-button.interface.d.ts +0 -7
- package/interfaces/ui-lib-image.interface.d.ts +0 -10
- package/interfaces/ui-lib-lang-item.interface.d.ts +0 -5
- package/interfaces/ui-lib-nav-items.interface.d.ts +0 -17
- package/interfaces/ui-lib-texts.interface.d.ts +0 -6
- package/lib/ui-lib.component.d.ts +0 -5
- package/mapper/cdn.token.d.ts +0 -2
- package/mapper/cloudinary.token.d.ts +0 -2
- package/mapper/component-mappers/404.mapper.d.ts +0 -2
- package/mapper/component-mappers/asymmetric-media.mapper.d.ts +0 -2
- package/mapper/component-mappers/category-progress.mapper.d.ts +0 -2
- package/mapper/component-mappers/columns-footer.mapper.d.ts +0 -2
- package/mapper/component-mappers/columns-media-stacked.mapper.d.ts +0 -2
- package/mapper/component-mappers/contact-minimal.mapper.d.ts +0 -2
- package/mapper/component-mappers/content-document.mapper.d.ts +0 -2
- package/mapper/component-mappers/header-clear.mapper.d.ts +0 -2
- package/mapper/component-mappers/hero-section.mapper.d.ts +0 -2
- package/mapper/component-mappers/index.d.ts +0 -24
- package/mapper/component-mappers/lang-modal.mapper.d.ts +0 -2
- package/mapper/component-mappers/legal-footer.mapper.d.ts +0 -2
- package/mapper/component-mappers/links-footer.mapper.d.ts +0 -2
- package/mapper/component-mappers/media-intro.mapper.d.ts +0 -2
- package/mapper/component-mappers/media-split.mapper.d.ts +0 -2
- package/mapper/component-mappers/mosaic-grid.mapper.d.ts +0 -2
- package/mapper/component-mappers/mosaic-parallax.mapper.d.ts +0 -2
- package/mapper/component-mappers/nav-modal.mapper.d.ts +0 -3
- package/mapper/component-mappers/section-intro.mapper.d.ts +0 -2
- package/mapper/component-mappers/social-footer.mapper.d.ts +0 -2
- package/mapper/component-mappers/split-previewer.mapper.d.ts +0 -2
- package/mapper/component-mappers/split-showcase.mapper.d.ts +0 -2
- package/mapper/component-mappers/stacked-rows.mapper.d.ts +0 -2
- package/mapper/component-mappers/types.d.ts +0 -1
- package/mapper/component-mappers/visual-footer.mapper.d.ts +0 -2
- package/mapper/index.d.ts +0 -4
- package/mapper/mapper.service.d.ts +0 -10
- package/modals/index.d.ts +0 -2
- package/modals/lang-modal/index.d.ts +0 -2
- package/modals/lang-modal/lang-modal.component.d.ts +0 -18
- package/modals/lang-modal/lang-modal.interface.d.ts +0 -2
- package/modals/nav-modal/index.d.ts +0 -2
- package/modals/nav-modal/nav-modal.component.d.ts +0 -11
- package/modals/nav-modal/nav-modal.interface.d.ts +0 -5
- package/public-api.d.ts +0 -1
- package/screen-sizer/index.d.ts +0 -1
- package/screen-sizer/screen-sizer.service.d.ts +0 -34
- package/shared/index.d.ts +0 -2
- package/shared/ui-icon/index.d.ts +0 -3
- package/shared/ui-icon/ui-icon.component.d.ts +0 -15
- package/shared/ui-icon/ui-icon.interface.d.ts +0 -5
- package/shared/ui-icon/ui-icon.mock.d.ts +0 -8
- package/shared/ui-image/index.d.ts +0 -1
- package/shared/ui-image/ui-image.component.d.ts +0 -21
- package/sliders/index.d.ts +0 -1
- package/sliders/swiper.directive.d.ts +0 -12
- package/theme/index.d.ts +0 -1
- package/theme/theme.service.d.ts +0 -16
- package/utils/index.d.ts +0 -1
|
@@ -1,45 +1,100 @@
|
|
|
1
|
-
import { CommonModule } from
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import {
|
|
4
|
-
import { ScrollRevealDirective } from
|
|
5
|
-
import { UiImageComponent } from
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
i0.ɵɵ
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
|
|
4
|
+
import { ScrollRevealDirective } from "@lluc_llull/ui-lib/directives";
|
|
5
|
+
import { UiImageComponent } from "@lluc_llull/ui-lib/shared";
|
|
6
|
+
var MosaicGridComponent = class MosaicGridComponent {
|
|
7
|
+
text;
|
|
8
|
+
images;
|
|
9
|
+
imageGroups = [];
|
|
10
|
+
ngOnInit() {
|
|
11
|
+
console.log("MosaicGridComponent initialized with images:", this.images);
|
|
12
|
+
if (!this.images?.length) {
|
|
13
|
+
this.imageGroups = [];
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
const groups = [];
|
|
17
|
+
for (let i = 0; i < this.images.length; i += 5) groups.push({
|
|
18
|
+
row1: this.images.slice(i, i + 3),
|
|
19
|
+
row2: this.images.slice(i + 3, i + 5)
|
|
20
|
+
});
|
|
21
|
+
this.imageGroups = groups;
|
|
22
|
+
}
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
24
|
+
minVersion: "12.0.0",
|
|
25
|
+
version: "22.2.4",
|
|
26
|
+
ngImport: i0,
|
|
27
|
+
type: MosaicGridComponent,
|
|
28
|
+
deps: [],
|
|
29
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
30
|
+
});
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
32
|
+
minVersion: "17.0.0",
|
|
33
|
+
version: "22.2.4",
|
|
34
|
+
type: MosaicGridComponent,
|
|
35
|
+
isStandalone: true,
|
|
36
|
+
selector: "lib-mosaic-grid",
|
|
37
|
+
inputs: {
|
|
38
|
+
text: "text",
|
|
39
|
+
images: "images"
|
|
40
|
+
},
|
|
41
|
+
host: { styleAttribute: "display: contents" },
|
|
42
|
+
ngImport: i0,
|
|
43
|
+
template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n @if (text) {\n <p\n class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n [innerHTML]=\"text\"\n ></p>\n }\n\n @for (group of imageGroups; track $index) {\n\n <!-- row 1: 3 imágenes -->\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @for (img of group.row1; track $index) {\n @if (img.publicId) {\n <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n } @else {\n <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n }\n }\n </div>\n\n <!-- row 2: 1 pequeña + 1 grande -->\n @if (group.row2.length) {\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @if (group.row2[0]!.publicId) {\n <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n } @else {\n <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n }\n\n @if (group.row2[1]) {\n @if (group.row2[1]!.publicId) {\n <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n } @else {\n <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n }\n }\n </div>\n }\n\n }\n</div>\n",
|
|
44
|
+
styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"],
|
|
45
|
+
dependencies: [
|
|
46
|
+
{
|
|
47
|
+
kind: "ngmodule",
|
|
48
|
+
type: CommonModule
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
kind: "component",
|
|
52
|
+
type: UiImageComponent,
|
|
53
|
+
selector: "ui-image",
|
|
54
|
+
inputs: [
|
|
55
|
+
"publicId",
|
|
56
|
+
"cloudName",
|
|
57
|
+
"transformations",
|
|
58
|
+
"eager",
|
|
59
|
+
"width",
|
|
60
|
+
"height"
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
kind: "directive",
|
|
65
|
+
type: ScrollRevealDirective,
|
|
66
|
+
selector: "[scrollReveal]",
|
|
67
|
+
inputs: ["distance", "duration"]
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
74
|
+
minVersion: "12.0.0",
|
|
75
|
+
version: "22.2.4",
|
|
76
|
+
ngImport: i0,
|
|
77
|
+
type: MosaicGridComponent,
|
|
78
|
+
decorators: [{
|
|
79
|
+
type: Component,
|
|
80
|
+
args: [{
|
|
81
|
+
selector: "lib-mosaic-grid",
|
|
82
|
+
imports: [
|
|
83
|
+
CommonModule,
|
|
84
|
+
UiImageComponent,
|
|
85
|
+
ScrollRevealDirective
|
|
86
|
+
],
|
|
87
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
88
|
+
host: { style: "display: contents" },
|
|
89
|
+
template: "<div class=\"mosaic-grid main-grid\" scrollReveal>\n @if (text) {\n <p\n class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n [innerHTML]=\"text\"\n ></p>\n }\n\n @for (group of imageGroups; track $index) {\n\n <!-- row 1: 3 imágenes -->\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @for (img of group.row1; track $index) {\n @if (img.publicId) {\n <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n } @else {\n <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n }\n }\n </div>\n\n <!-- row 2: 1 pequeña + 1 grande -->\n @if (group.row2.length) {\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @if (group.row2[0]!.publicId) {\n <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n } @else {\n <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n }\n\n @if (group.row2[1]) {\n @if (group.row2[1]!.publicId) {\n <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n } @else {\n <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n }\n }\n </div>\n }\n\n }\n</div>\n",
|
|
90
|
+
styles: ["ui-image{object-fit:cover}ui-image.image-half-height{height:50%!important}\n"]
|
|
91
|
+
}]
|
|
92
|
+
}],
|
|
93
|
+
propDecorators: {
|
|
94
|
+
text: [{ type: Input }],
|
|
95
|
+
images: [{ type: Input }]
|
|
96
|
+
}
|
|
97
|
+
});
|
|
44
98
|
export { MosaicGridComponent };
|
|
45
|
-
|
|
99
|
+
|
|
100
|
+
//# sourceMappingURL=lluc_llull-ui-lib-content-mosaic-grid.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-grid.mjs","sources":["../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.ts","../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.html"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-grid.mjs","names":[],"sources":["../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.ts","../../../projects/ui-lib/content/mosaic-grid/mosaic-grid.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';\nimport { ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-mosaic-grid',\n imports: [CommonModule, UiImageComponent, ScrollRevealDirective],\n templateUrl: './mosaic-grid.component.html',\n styleUrl: './mosaic-grid.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class MosaicGridComponent implements OnInit{\n @Input() text?: string;\n @Input() images?: UiLibImageI[];\n\n imageGroups: { row1: UiLibImageI[], row2: UiLibImageI[] }[] = [];\n\n ngOnInit(): void {\n console.log('MosaicGridComponent initialized with images:', this.images);\n if (!this.images?.length) {\n this.imageGroups = [];\n return;\n }\n const groups = [];\n for (let i = 0; i < this.images.length; i += 5) {\n groups.push({\n row1: this.images.slice(i, i + 3),\n row2: this.images.slice(i + 3, i + 5)\n });\n }\n this.imageGroups = groups;\n }\n}","<div class=\"mosaic-grid main-grid\" scrollReveal>\n @if (text) {\n <p\n class=\"mosaic-grid__text col-span-full md:col-span-6 md:col-start-7\"\n [innerHTML]=\"text\"\n ></p>\n }\n\n @for (group of imageGroups; track $index) {\n\n <!-- row 1: 3 imágenes -->\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @for (img of group.row1; track $index) {\n @if (img.publicId) {\n <ui-image [publicId]=\"img.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\"></ui-image>\n } @else {\n <img [src]=\"img.url\" [alt]=\"img.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-{{ $index * 4 + 1 }}\" [class.image-half-height]=\"$index === 2\" />\n }\n }\n </div>\n\n <!-- row 2: 1 pequeña + 1 grande -->\n @if (group.row2.length) {\n <div class=\"mosaic-grid__images main-grid col-span-full\">\n @if (group.row2[0]!.publicId) {\n <ui-image [publicId]=\"group.row2[0]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\"></ui-image>\n } @else {\n <img [src]=\"group.row2[0]!.url\" [alt]=\"group.row2[0]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-4 md:col-start-1 image-half-height\" />\n }\n\n @if (group.row2[1]) {\n @if (group.row2[1]!.publicId) {\n <ui-image [publicId]=\"group.row2[1]!.publicId\" [eager]=\"true\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\"></ui-image>\n } @else {\n <img [src]=\"group.row2[1]!.url\" [alt]=\"group.row2[1]!.alt\" loading=\"eager\" class=\"mosaic-grid__images col-span-full md:col-span-8 md:col-start-5\" />\n }\n }\n </div>\n }\n\n }\n</div>\n"],"mappings":";;;;;AAgBA,IAAa,sBAAb,MAAa,oBAAmB;CACrB;CACA;CAET,cAA8D,CAAA;CAE9D,WAAQ;EACN,QAAQ,IAAI,gDAAgD,KAAK,MAAM;EACvE,IAAI,CAAC,KAAK,QAAQ,QAAQ;GACxB,KAAK,cAAc,CAAA;GACnB;EACF;EACA,MAAM,SAAS,CAAA;EACf,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,OAAO,QAAQ,KAAK,GAC3C,OAAO,KAAK;GACV,MAAM,KAAK,OAAO,MAAM,GAAG,IAAI,CAAC;GAChC,MAAM,KAAK,OAAO,MAAM,IAAI,GAAG,IAAI,CAAC;EACrC,CAAA;EAEH,KAAK,cAAc;CACrB;CApBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UChBhC;EA0CA,QAAA,CAAA,8EAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDlCY;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAV/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,SAClB;IAAC;IAAc;IAAkB;GAAqB;GAAC,iBAG/C,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,8EAAA;EAAA,CAAA;;;E,SAGA,MAAA,M;E,WACA,MAAA,M"}
|
|
@@ -1,58 +1,110 @@
|
|
|
1
|
-
import { isPlatformBrowser } from
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import {
|
|
4
|
-
import { UiImageComponent } from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1
|
+
import { isPlatformBrowser } from "@angular/common";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, Inject, Input, PLATFORM_ID, ViewChild, signal } from "@angular/core";
|
|
4
|
+
import { UiImageComponent } from "@lluc_llull/ui-lib/shared";
|
|
5
|
+
var MosaicParallaxComponent = class MosaicParallaxComponent {
|
|
6
|
+
title;
|
|
7
|
+
text;
|
|
8
|
+
images;
|
|
9
|
+
mosaicSection;
|
|
10
|
+
isVisible = signal(false, ...ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []);
|
|
11
|
+
observer;
|
|
12
|
+
isBrowser;
|
|
13
|
+
constructor(platformId) {
|
|
14
|
+
this.isBrowser = isPlatformBrowser(platformId);
|
|
15
|
+
}
|
|
16
|
+
ngAfterViewInit() {
|
|
17
|
+
if (!this.isBrowser) return;
|
|
18
|
+
this.observer = new IntersectionObserver(([entry]) => {
|
|
19
|
+
if (entry.isIntersecting && !this.isVisible()) {
|
|
20
|
+
this.isVisible.set(true);
|
|
21
|
+
this.observer?.disconnect();
|
|
22
|
+
}
|
|
23
|
+
}, { threshold: .1 });
|
|
24
|
+
this.observer.observe(this.mosaicSection.nativeElement);
|
|
25
|
+
}
|
|
26
|
+
ngOnDestroy() {
|
|
27
|
+
this.observer?.disconnect();
|
|
28
|
+
}
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
30
|
+
minVersion: "12.0.0",
|
|
31
|
+
version: "22.2.4",
|
|
32
|
+
ngImport: i0,
|
|
33
|
+
type: MosaicParallaxComponent,
|
|
34
|
+
deps: [{ token: PLATFORM_ID }],
|
|
35
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
36
|
+
});
|
|
37
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
38
|
+
minVersion: "17.0.0",
|
|
39
|
+
version: "22.2.4",
|
|
40
|
+
type: MosaicParallaxComponent,
|
|
41
|
+
isStandalone: true,
|
|
42
|
+
selector: "app-mosaic-parallax",
|
|
43
|
+
inputs: {
|
|
44
|
+
title: "title",
|
|
45
|
+
text: "text",
|
|
46
|
+
images: "images"
|
|
47
|
+
},
|
|
48
|
+
host: { styleAttribute: "display: contents" },
|
|
49
|
+
viewQueries: [{
|
|
50
|
+
propertyName: "mosaicSection",
|
|
51
|
+
first: true,
|
|
52
|
+
predicate: ["mosaicSection"],
|
|
53
|
+
descendants: true
|
|
54
|
+
}],
|
|
55
|
+
ngImport: i0,
|
|
56
|
+
template: "<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n @if (title) {\n <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n }\n\n @if (text) {\n <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n {{ text }}\n </p>\n }\n\n @if (images && images.length > 0) {\n <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n @for (item of images; track $index) {\n <article\n class=\"mosaic-item\"\n [class.mosaic-item--visible]=\"isVisible()\"\n [style.--item-index]=\"images.length - 1 - $index\"\n [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n >\n <div class=\"mosaic-item__media\">\n @if (item.publicId) {\n <ui-image [publicId]=\"item.publicId\"></ui-image>\n } @else {\n <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n }\n </div>\n @if (item.texts; as texts) {\n <div class=\"mosaic-item__content\">\n <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n <div class=\"mosaic-item__meta\">\n <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n <span class=\"mosaic-item__index\">\n {{ ($index + 1).toString().padStart(2, '0') }}\n </span>\n </div>\n </div>\n }\n </article>\n }\n </div>\n }\n\n</div>",
|
|
57
|
+
styles: ["@charset \"UTF-8\";.mosaic-parallax{position:relative;align-items:start;padding-block:4rem}.text{grid-row:2}.mosaic-parallax__track{grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start;justify-content:center;gap:2.25rem;width:100%;overflow:hidden;padding-block:0 4rem}.mosaic-item{flex-shrink:0;width:95%;display:flex;flex-direction:column;border:2px solid var(--border-primary);overflow:hidden;background:var(--content-bg-light);margin-top:calc(var(--item-index) * 80px);transform:translateY(100px);transition:transform 1.4s cubic-bezier(.16,1,.3,1) var(--anim-delay),opacity .8s ease var(--anim-delay)}.mosaic-item--visible{transform:translateY(0);opacity:1}.mosaic-item__media{width:100%;aspect-ratio:4/3;overflow:hidden}.mosaic-item__media img,.mosaic-item__media ui-image{width:100%;height:100%;object-fit:cover;display:block}.mosaic-item__content{display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem;min-height:11rem;background:var(--content-bg-dark);color:var(--text-inverse);border-top:2px solid var(--border-primary)}.mosaic-item:nth-child(2n) .mosaic-item__content{background:var(--content-bg-light);color:var(--text-primary)}.mosaic-item:nth-child(2n) .mosaic-item__index{background:var(--content-bg-dark);color:var(--text-inverse)}.mosaic-item__description{font-size:.9rem;line-height:1.4;margin:0 0 1rem}.mosaic-item__meta{display:flex;justify-content:space-between;align-items:flex-end}.mosaic-item__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.mosaic-item__index{font-size:3rem;font-weight:900;line-height:1;background:#f2f2f2;color:var(--text-primary);padding:.5rem 1rem;border-left:2px solid var(--border-primary);margin:0 -1.5rem -1.2rem 0}@media(max-width:1024px){.mosaic-parallax__track{flex-direction:column;align-items:center;justify-items:center;overflow:visible;grid-row:3}.mosaic-item{width:90%;height:90%;margin-top:0!important}}@media(max-width:768px){.mosaic-item{width:85%;margin-top:0!important}}\n"],
|
|
58
|
+
dependencies: [{
|
|
59
|
+
kind: "component",
|
|
60
|
+
type: UiImageComponent,
|
|
61
|
+
selector: "ui-image",
|
|
62
|
+
inputs: [
|
|
63
|
+
"publicId",
|
|
64
|
+
"cloudName",
|
|
65
|
+
"transformations",
|
|
66
|
+
"eager",
|
|
67
|
+
"width",
|
|
68
|
+
"height"
|
|
69
|
+
]
|
|
70
|
+
}],
|
|
71
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
75
|
+
minVersion: "12.0.0",
|
|
76
|
+
version: "22.2.4",
|
|
77
|
+
ngImport: i0,
|
|
78
|
+
type: MosaicParallaxComponent,
|
|
79
|
+
decorators: [{
|
|
80
|
+
type: Component,
|
|
81
|
+
args: [{
|
|
82
|
+
selector: "app-mosaic-parallax",
|
|
83
|
+
standalone: true,
|
|
84
|
+
imports: [UiImageComponent],
|
|
85
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
+
host: { style: "display: contents" },
|
|
87
|
+
template: "<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n @if (title) {\n <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n }\n\n @if (text) {\n <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n {{ text }}\n </p>\n }\n\n @if (images && images.length > 0) {\n <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n @for (item of images; track $index) {\n <article\n class=\"mosaic-item\"\n [class.mosaic-item--visible]=\"isVisible()\"\n [style.--item-index]=\"images.length - 1 - $index\"\n [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n >\n <div class=\"mosaic-item__media\">\n @if (item.publicId) {\n <ui-image [publicId]=\"item.publicId\"></ui-image>\n } @else {\n <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n }\n </div>\n @if (item.texts; as texts) {\n <div class=\"mosaic-item__content\">\n <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n <div class=\"mosaic-item__meta\">\n <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n <span class=\"mosaic-item__index\">\n {{ ($index + 1).toString().padStart(2, '0') }}\n </span>\n </div>\n </div>\n }\n </article>\n }\n </div>\n }\n\n</div>",
|
|
88
|
+
styles: ["@charset \"UTF-8\";.mosaic-parallax{position:relative;align-items:start;padding-block:4rem}.text{grid-row:2}.mosaic-parallax__track{grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start;justify-content:center;gap:2.25rem;width:100%;overflow:hidden;padding-block:0 4rem}.mosaic-item{flex-shrink:0;width:95%;display:flex;flex-direction:column;border:2px solid var(--border-primary);overflow:hidden;background:var(--content-bg-light);margin-top:calc(var(--item-index) * 80px);transform:translateY(100px);transition:transform 1.4s cubic-bezier(.16,1,.3,1) var(--anim-delay),opacity .8s ease var(--anim-delay)}.mosaic-item--visible{transform:translateY(0);opacity:1}.mosaic-item__media{width:100%;aspect-ratio:4/3;overflow:hidden}.mosaic-item__media img,.mosaic-item__media ui-image{width:100%;height:100%;object-fit:cover;display:block}.mosaic-item__content{display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem;min-height:11rem;background:var(--content-bg-dark);color:var(--text-inverse);border-top:2px solid var(--border-primary)}.mosaic-item:nth-child(2n) .mosaic-item__content{background:var(--content-bg-light);color:var(--text-primary)}.mosaic-item:nth-child(2n) .mosaic-item__index{background:var(--content-bg-dark);color:var(--text-inverse)}.mosaic-item__description{font-size:.9rem;line-height:1.4;margin:0 0 1rem}.mosaic-item__meta{display:flex;justify-content:space-between;align-items:flex-end}.mosaic-item__date{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}.mosaic-item__index{font-size:3rem;font-weight:900;line-height:1;background:#f2f2f2;color:var(--text-primary);padding:.5rem 1rem;border-left:2px solid var(--border-primary);margin:0 -1.5rem -1.2rem 0}@media(max-width:1024px){.mosaic-parallax__track{flex-direction:column;align-items:center;justify-items:center;overflow:visible;grid-row:3}.mosaic-item{width:90%;height:90%;margin-top:0!important}}@media(max-width:768px){.mosaic-item{width:85%;margin-top:0!important}}\n"]
|
|
89
|
+
}]
|
|
90
|
+
}],
|
|
91
|
+
ctorParameters: () => [{
|
|
92
|
+
type: void 0,
|
|
93
|
+
decorators: [{
|
|
94
|
+
type: Inject,
|
|
95
|
+
args: [PLATFORM_ID]
|
|
96
|
+
}]
|
|
97
|
+
}],
|
|
98
|
+
propDecorators: {
|
|
99
|
+
title: [{ type: Input }],
|
|
100
|
+
text: [{ type: Input }],
|
|
101
|
+
images: [{ type: Input }],
|
|
102
|
+
mosaicSection: [{
|
|
103
|
+
type: ViewChild,
|
|
104
|
+
args: ["mosaicSection"]
|
|
105
|
+
}]
|
|
106
|
+
}
|
|
107
|
+
});
|
|
57
108
|
export { MosaicParallaxComponent };
|
|
58
|
-
|
|
109
|
+
|
|
110
|
+
//# sourceMappingURL=lluc_llull-ui-lib-content-mosaic-parallax.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-parallax.mjs","sources":["../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.ts","../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.html"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-mosaic-parallax.mjs","names":[],"sources":["../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.ts","../../../projects/ui-lib/content/mosaic-parallax/mosaic-parallax.component.html"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Inject,\n Input,\n OnDestroy,\n PLATFORM_ID,\n signal,\n ViewChild,\n} from '@angular/core';\nimport { UiLibImageI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiImageComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'app-mosaic-parallax',\n standalone: true,\n imports: [UiImageComponent],\n templateUrl: './mosaic-parallax.component.html',\n styleUrls: ['./mosaic-parallax.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class MosaicParallaxComponent implements AfterViewInit, OnDestroy {\n @Input() title?: string;\n @Input() text?: string;\n @Input() images?: UiLibImageI[];\n\n @ViewChild('mosaicSection') mosaicSection!: ElementRef<HTMLElement>;\n\n isVisible = signal(false);\n private observer?: IntersectionObserver;\n private isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) platformId: object) {\n this.isBrowser = isPlatformBrowser(platformId);\n }\n\n ngAfterViewInit() {\n if (!this.isBrowser) return;\n\n this.observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting && !this.isVisible()) {\n this.isVisible.set(true);\n this.observer?.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n this.observer.observe(this.mosaicSection.nativeElement);\n }\n\n ngOnDestroy() {\n this.observer?.disconnect();\n }\n}\n","<div class=\"mosaic-parallax main-grid col-span-full\" #mosaicSection>\n\n @if (title) {\n <h2 class=\"subtitle md:col-span-3 md:col-start-1\">{{ title }}</h2>\n }\n\n @if (text) {\n <p class=\"text col-span-full md:col-span-5 md:col-start-1\">\n {{ text }}\n </p>\n }\n\n @if (images && images.length > 0) {\n <div class=\"mosaic-parallax__track col-span-full md:col-span-10 md:col-start-2\">\n @for (item of images; track $index) {\n <article\n class=\"mosaic-item\"\n [class.mosaic-item--visible]=\"isVisible()\"\n [style.--item-index]=\"images.length - 1 - $index\"\n [style.--anim-delay]=\"(images.length - 1 - $index) * 250 + 'ms'\"\n >\n <div class=\"mosaic-item__media\">\n @if (item.publicId) {\n <ui-image [publicId]=\"item.publicId\"></ui-image>\n } @else {\n <img [src]=\"item.url\" [alt]=\"item.alt\" loading=\"lazy\" />\n }\n </div>\n @if (item.texts; as texts) {\n <div class=\"mosaic-item__content\">\n <p class=\"mosaic-item__description\">{{ texts.text }}</p>\n <div class=\"mosaic-item__meta\">\n <span class=\"mosaic-item__date\">{{ texts.title }}</span>\n <span class=\"mosaic-item__index\">\n {{ ($index + 1).toString().padStart(2, '0') }}\n </span>\n </div>\n </div>\n }\n </article>\n }\n </div>\n }\n\n</div>"],"mappings":";;;;AA2BA,IAAa,0BAAb,MAAa,wBAAuB;CACvB;CACA;CACA;CAEmB;CAE5B,YAAY,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACjB;CACA;CAER,YAAiC,YAAkB;EAC/C,KAAK,YAAY,kBAAkB,UAAU;CACjD;CAEA,kBAAe;EACX,IAAI,CAAC,KAAK,WAAW;EAErB,KAAK,WAAW,IAAI,sBACf,CAAC,WAAU;GACR,IAAI,MAAM,kBAAkB,CAAC,KAAK,UAAS,GAAI;IAC3C,KAAK,UAAU,IAAI,IAAI;IACvB,KAAK,UAAU,WAAU;GAC7B;EACJ,GACA,EAAE,WAAW,GAAG,CAAE;EAGtB,KAAK,SAAS,QAAQ,KAAK,cAAc,aAAa;CAC1D;CAEA,cAAW;EACP,KAAK,UAAU,WAAU;CAC7B;CAjCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAuB,MAAA,CAAA,EAAA,OAWZ,YAAW,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAXtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAuB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,eAAA;GAAA,aAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC3BpC;EA4CM,QAAA,CAAA,2gEAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDzBQ;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAXnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAqB,YACnB;GAAI,SACP,CAAC,gBAAgB;GAAC,iBAGV,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,2gEAAA;EAAA,CAAA;;;;;GAaY,MAAA;GAAO,MAAA,CAAA,WAAW;;;;E,UAV9B,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M;;GAEA,MAAA;GAAU,MAAA,CAAA,eAAe"}
|
|
@@ -1,38 +1,101 @@
|
|
|
1
|
-
import { CommonModule } from
|
|
2
|
-
import * as i0 from
|
|
3
|
-
import {
|
|
4
|
-
import { LinkTypeDirective, ScrollRevealDirective } from
|
|
5
|
-
import { UiIconComponent } from
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
1
|
+
import { CommonModule } from "@angular/common";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
|
|
4
|
+
import { LinkTypeDirective, ScrollRevealDirective } from "@lluc_llull/ui-lib/directives";
|
|
5
|
+
import { UiIconComponent } from "@lluc_llull/ui-lib/shared";
|
|
6
|
+
var SectionIntroComponent = class SectionIntroComponent {
|
|
7
|
+
pretitle;
|
|
8
|
+
title;
|
|
9
|
+
subtitle;
|
|
10
|
+
text;
|
|
11
|
+
button;
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
13
|
+
minVersion: "12.0.0",
|
|
14
|
+
version: "22.2.4",
|
|
15
|
+
ngImport: i0,
|
|
16
|
+
type: SectionIntroComponent,
|
|
17
|
+
deps: [],
|
|
18
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
19
|
+
});
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
21
|
+
minVersion: "17.0.0",
|
|
22
|
+
version: "22.2.4",
|
|
23
|
+
type: SectionIntroComponent,
|
|
24
|
+
isStandalone: true,
|
|
25
|
+
selector: "lib-section-intro",
|
|
26
|
+
inputs: {
|
|
27
|
+
pretitle: "pretitle",
|
|
28
|
+
title: "title",
|
|
29
|
+
subtitle: "subtitle",
|
|
30
|
+
text: "text",
|
|
31
|
+
button: "button"
|
|
32
|
+
},
|
|
33
|
+
host: { styleAttribute: "display: contents" },
|
|
34
|
+
ngImport: i0,
|
|
35
|
+
template: "<div class=\"section-intro col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n @if (pretitle) {\n <h2 class=\"pretitle\">{{ pretitle }}</h2>\n }\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (subtitle) {\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n }\n @if (text) {\n <p class=\"text\">{{ text }}</p>\n }\n @if (button) {\n <div class=\"btn-group\">\n <a [href]=\"button.url\" [linkType]=\"button.linkType\" class=\"btn btn-link\">\n <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n {{ button.label }}\n </a>\n </div>\n }\n</div>\n",
|
|
36
|
+
styles: [".section-intro{text-align:start;align-items:start}.title,.subtitle{text-transform:uppercase}\n"],
|
|
37
|
+
dependencies: [
|
|
38
|
+
{
|
|
39
|
+
kind: "ngmodule",
|
|
40
|
+
type: CommonModule
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
kind: "directive",
|
|
44
|
+
type: LinkTypeDirective,
|
|
45
|
+
selector: "[linkType]",
|
|
46
|
+
inputs: ["linkType", "href"],
|
|
47
|
+
outputs: ["anchorClicked"]
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
kind: "component",
|
|
51
|
+
type: UiIconComponent,
|
|
52
|
+
selector: "ui-icon",
|
|
53
|
+
inputs: [
|
|
54
|
+
"name",
|
|
55
|
+
"size",
|
|
56
|
+
"color"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
kind: "directive",
|
|
61
|
+
type: ScrollRevealDirective,
|
|
62
|
+
selector: "[scrollReveal]",
|
|
63
|
+
inputs: ["distance", "duration"]
|
|
64
|
+
}
|
|
65
|
+
],
|
|
66
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
70
|
+
minVersion: "12.0.0",
|
|
71
|
+
version: "22.2.4",
|
|
72
|
+
ngImport: i0,
|
|
73
|
+
type: SectionIntroComponent,
|
|
74
|
+
decorators: [{
|
|
75
|
+
type: Component,
|
|
76
|
+
args: [{
|
|
77
|
+
selector: "lib-section-intro",
|
|
78
|
+
standalone: true,
|
|
79
|
+
imports: [
|
|
80
|
+
CommonModule,
|
|
81
|
+
LinkTypeDirective,
|
|
82
|
+
UiIconComponent,
|
|
83
|
+
ScrollRevealDirective
|
|
84
|
+
],
|
|
85
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
+
host: { style: "display: contents" },
|
|
87
|
+
template: "<div class=\"section-intro col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n @if (pretitle) {\n <h2 class=\"pretitle\">{{ pretitle }}</h2>\n }\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (subtitle) {\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n }\n @if (text) {\n <p class=\"text\">{{ text }}</p>\n }\n @if (button) {\n <div class=\"btn-group\">\n <a [href]=\"button.url\" [linkType]=\"button.linkType\" class=\"btn btn-link\">\n <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n {{ button.label }}\n </a>\n </div>\n }\n</div>\n",
|
|
88
|
+
styles: [".section-intro{text-align:start;align-items:start}.title,.subtitle{text-transform:uppercase}\n"]
|
|
89
|
+
}]
|
|
90
|
+
}],
|
|
91
|
+
propDecorators: {
|
|
92
|
+
pretitle: [{ type: Input }],
|
|
93
|
+
title: [{ type: Input }],
|
|
94
|
+
subtitle: [{ type: Input }],
|
|
95
|
+
text: [{ type: Input }],
|
|
96
|
+
button: [{ type: Input }]
|
|
97
|
+
}
|
|
98
|
+
});
|
|
37
99
|
export { SectionIntroComponent };
|
|
38
|
-
|
|
100
|
+
|
|
101
|
+
//# sourceMappingURL=lluc_llull-ui-lib-content-section-intro.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lluc_llull-ui-lib-content-section-intro.mjs","sources":["../../../projects/ui-lib/content/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html"
|
|
1
|
+
{"version":3,"file":"lluc_llull-ui-lib-content-section-intro.mjs","names":[],"sources":["../../../projects/ui-lib/content/section-intro/section-intro.component.ts","../../../projects/ui-lib/content/section-intro/section-intro.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { LinkTypeDirective, ScrollRevealDirective } from '@lluc_llull/ui-lib/directives';\nimport { UiLibButtonI } from '@lluc_llull/ui-lib/interfaces';\nimport { UiIconComponent } from '@lluc_llull/ui-lib/shared';\n\n@Component({\n selector: 'lib-section-intro',\n standalone: true,\n imports: [CommonModule, LinkTypeDirective, UiIconComponent, ScrollRevealDirective],\n templateUrl: './section-intro.component.html',\n styleUrl: './section-intro.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n style: 'display: contents',\n },\n})\nexport class SectionIntroComponent {\n @Input() pretitle?: string;\n @Input() title?: string;\n @Input() subtitle?: string;\n @Input() text?: string;\n @Input() button?: UiLibButtonI;\n}\n","<div class=\"section-intro col-span-full md:col-span-12 md:col-start-1\" scrollReveal>\n @if (pretitle) {\n <h2 class=\"pretitle\">{{ pretitle }}</h2>\n }\n @if (title) {\n <h1 class=\"title\">{{ title }}</h1>\n }\n @if (subtitle) {\n <h2 class=\"subtitle\">{{ subtitle }}</h2>\n }\n @if (text) {\n <p class=\"text\">{{ text }}</p>\n }\n @if (button) {\n <div class=\"btn-group\">\n <a [href]=\"button.url\" [linkType]=\"button.linkType\" class=\"btn btn-link\">\n <ui-icon [name]=\"button.icon!\" [size]=\"17\" [color]=\"'var(--color-primary)'\"></ui-icon>\n {{ button.label }}\n </a>\n </div>\n }\n</div>\n"],"mappings":";;;;;AAiBA,IAAa,wBAAb,MAAa,sBAAqB;CACrB;CACA;CACA;CACA;CACA;CALA,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;GAAA,OAAA;GAAA,UAAA;GAAA,MAAA;GAAA,QAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,oBAAA;EAAA,UAAA;EAAA,UCjBlC;EAsBA,QAAA,CAAA,gGAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDbc;GAAY;GAAA;IAAA,MAAA;IAAA,MAAE;IAAiB,UAAA;IAAA,QAAA,CAAA,YAAA,MAAA;IAAA,SAAA,CAAA,eAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAqB,UAAA;IAAA,QAAA,CAAA,YAAA,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQxE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAXjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAmB,YACjB;GAAI,SACP;IAAC;IAAc;IAAmB;IAAiB;GAAqB;GAAC,iBAGjE,wBAAwB;GAAM,MACzC,EACF,OAAO,oBACV;GAAA,UAAA;GAAA,QAAA,CAAA,gGAAA;EAAA,CAAA;;;E,aAGA,MAAA,M;E,UACA,MAAA,M;E,aACA,MAAA,M;E,SACA,MAAA,M;E,WACA,MAAA,M"}
|