@solcre-org/core-ui 2.11.43 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
/* ******************************************** */
|
|
2
|
+
/** COMPONENT: IMAGE CAROUSEL
|
|
3
|
+
/* ******************************************** */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
.c-img-carousel {
|
|
7
|
+
--_br: 10px;
|
|
8
|
+
--_controls-size: var(--controls-size,2rem);
|
|
9
|
+
--_controls-color: var(--color-neutral-100);
|
|
10
|
+
--_controls-bg-hsl: var(--color-neutral-900-hsl);
|
|
11
|
+
--_controls-bottom: 2rem;
|
|
12
|
+
--_controls-offset-x: var(--controls-offset,1rem);
|
|
13
|
+
--_nav-color-hsl: var(--color-neutral-100-hsl);
|
|
14
|
+
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.c-img-carousel__viewport{
|
|
19
|
+
position: relative;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
border-radius: var(--_br);
|
|
22
|
+
background: var(--color-neutral-200);
|
|
23
|
+
touch-action: pan-y;
|
|
24
|
+
user-select: none;
|
|
25
|
+
-webkit-user-drag: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.c-img-carousel[data-per-view]{
|
|
29
|
+
border-radius: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.c-img-carousel[data-per-view] .c-img-carousel__slide{
|
|
33
|
+
padding-inline: calc(var(--items-gap)/2);
|
|
34
|
+
}
|
|
35
|
+
.c-img-carousel[data-per-view] .c-img-carousel__slide-inner{
|
|
36
|
+
border-radius: var(--_br);
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.c-img-carousel__holder {
|
|
41
|
+
display: flex;
|
|
42
|
+
transition: transform 350ms ease;
|
|
43
|
+
will-change: transform;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.c-img-carousel[data-per-view] .c-img-carousel__holder{
|
|
47
|
+
margin-inline: calc(var(--items-gap)/-2);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.c-img-carousel__slide {
|
|
51
|
+
position: relative;
|
|
52
|
+
flex: 0 0 calc(100% / var(--per-view, 1));
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.c-img-carousel__slide-inner::before{
|
|
56
|
+
content: "";
|
|
57
|
+
display: block;
|
|
58
|
+
height: 0;
|
|
59
|
+
padding-bottom: 56.25%;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.c-img-carousel__slide-inner{
|
|
63
|
+
position: relative;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.c-img-carousel__slide img {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: 0;
|
|
71
|
+
left: 0;
|
|
72
|
+
width: 100%;
|
|
73
|
+
height: 100%;
|
|
74
|
+
object-fit: cover;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.c-img-carousel__btn--prev {
|
|
78
|
+
left: var(--_controls-offset-x);
|
|
79
|
+
}
|
|
80
|
+
.c-img-carousel__btn--next {
|
|
81
|
+
right: var(--_controls-offset-x);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.c-img-carousel--arrows-out .c-img-carousel__btn--prev {
|
|
85
|
+
left: calc(var(--_controls-offset-x)*-1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.c-img-carousel--arrows-out .c-img-carousel__btn--next {
|
|
89
|
+
right: calc(var(--_controls-offset-x)*-1);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.c-img-carousel__btn {
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 50%;
|
|
95
|
+
transform: translateY(-50%);
|
|
96
|
+
border: none;
|
|
97
|
+
background: hsl(var(--_controls-bg-hsl)/40%);
|
|
98
|
+
padding: calc(var(--_controls-size)/2);
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
color: var(--_controls-color);
|
|
101
|
+
font-size: var(--_controls-size);
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
|
|
104
|
+
z-index: 1;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.c-img-carousel__btn:disabled {
|
|
108
|
+
opacity: .4;
|
|
109
|
+
transition: opacity var(--trs-duration-400) ease-out, color var(--trs-duration-400) ease-out;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.c-img-carousel__dots {
|
|
113
|
+
position: absolute;
|
|
114
|
+
display: flex;
|
|
115
|
+
gap: 1rem;
|
|
116
|
+
left: 50%;
|
|
117
|
+
bottom: var(--_controls-bottom);
|
|
118
|
+
transform: translateX(-50%);
|
|
119
|
+
z-index: 1;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.c-img-carousel__dot {
|
|
123
|
+
width: 15px;
|
|
124
|
+
height: 15px;
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
border: 0;
|
|
127
|
+
background: hsl(var(--_nav-color-hsl)/100%);
|
|
128
|
+
opacity: 60%;
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
}
|
|
131
|
+
.c-img-carousel__dot[aria-current="true"] {
|
|
132
|
+
opacity: 1;
|
|
133
|
+
pointer-events: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
/* ********************** MEDIA HOVER ********************** */
|
|
138
|
+
|
|
139
|
+
@media (hover: hover) {
|
|
140
|
+
|
|
141
|
+
.c-img-carousel__dot:not([aria-current="true"]):hover{
|
|
142
|
+
background-color: var(--color-hover);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.c-img-carousel__btn{
|
|
146
|
+
transition: background-color var(--trs-duration-400) ease-out;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.c-img-carousel__btn:hover{
|
|
150
|
+
background-color: hsl(var(--color-hover-hsl)/50%);
|
|
151
|
+
transition: background-color var(--trs-duration-400) ease-out;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
/* ********************** SHORT MOBILE ********************** */
|
|
159
|
+
|
|
160
|
+
@media (max-width: 22.4375rem) { /* 359px */
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
/* ********************** TALL MOBILE PORTRAIT ********************** */
|
|
168
|
+
|
|
169
|
+
@media (max-width: 47.9375rem) and (min-height: 45.625rem) { /* 767px, 730px */
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
/* ********************** MOBILE LANDSCAPE ********************** */
|
|
177
|
+
|
|
178
|
+
@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) { /* 500px, 767px */
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
/* ********************** de Mobile a TABLET ********************** */
|
|
186
|
+
|
|
187
|
+
@media (min-width: 48rem) { /* 768px */
|
|
188
|
+
}
|
|
189
|
+
@media (min-width: 48rem) and (orientation: portrait) {
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
/* ********************** de Tablet a DESKTOP ********************** */
|
|
196
|
+
|
|
197
|
+
@media (min-width: 61.25rem) { /* 980px */
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
/* ********************** de Desktop a DESKTOP 2 ********************** */
|
|
204
|
+
|
|
205
|
+
@media (min-width: 75rem) { /* 1200px */
|
|
206
|
+
}
|
|
207
|
+
@media (min-width: 75rem) and (min-height: 45rem) { /* 1200, 720 */
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
/* ********************** de Desktop 2 a HD ********************** */
|
|
214
|
+
|
|
215
|
+
@media (min-width: 87.5rem) { /* 1400px */
|
|
216
|
+
}
|
|
217
|
+
@media (min-width: 87.5rem) and (min-height: 49.375rem) { /* 1400px, 790px */
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
/* ********************** de Hd a FULL HD ********************** */
|
|
224
|
+
|
|
225
|
+
@media (min-width: 100rem) { /* 1600px */
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@media (min-width: 100rem) and (min-height: 49.375rem) { /* 1600px, 790px */
|
|
229
|
+
}
|
|
230
|
+
@media (min-width: 100rem) and (min-height: 56.25rem) { /* 1600px, 900px */
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
@media (min-width: 112.5rem) { /* 1800px */
|
|
234
|
+
}
|
|
235
|
+
@media (min-width: 112.5rem) and (min-height: 56.25rem) { /* 1800px, 900px */
|
|
236
|
+
}
|
package/assets/css/main.css
CHANGED
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
/* ❌ */ @import url(inc/components/bottom-nav.css); /* !(test) */
|
|
68
68
|
/* ⭐️ */ @import url(inc/components/calendar.css);
|
|
69
69
|
/* ⭐️ */ @import url(inc/components/progressbar.css);
|
|
70
|
+
/* ✅ */ @import url(inc/components/image-carousel.css); /* !(new) */
|
|
70
71
|
|
|
71
72
|
|
|
72
73
|
/* Utilities */
|
|
@@ -10830,11 +10830,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
10830
10830
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
10831
10831
|
// No edites manualmente este archivo
|
|
10832
10832
|
const VERSION = {
|
|
10833
|
-
full: '2.
|
|
10833
|
+
full: '2.12.0',
|
|
10834
10834
|
major: 2,
|
|
10835
|
-
minor:
|
|
10836
|
-
patch:
|
|
10837
|
-
timestamp: '2025-09-
|
|
10835
|
+
minor: 12,
|
|
10836
|
+
patch: 0,
|
|
10837
|
+
timestamp: '2025-09-02T20:07:18.238Z',
|
|
10838
10838
|
buildDate: '2/9/2025'
|
|
10839
10839
|
};
|
|
10840
10840
|
|
|
@@ -12732,6 +12732,171 @@ var SliderNavigationType;
|
|
|
12732
12732
|
SliderNavigationType["COUNTER"] = "counter";
|
|
12733
12733
|
})(SliderNavigationType || (SliderNavigationType = {}));
|
|
12734
12734
|
|
|
12735
|
+
class CarouselComponent {
|
|
12736
|
+
images = input([]);
|
|
12737
|
+
config = input({});
|
|
12738
|
+
carouselHolder = viewChild('carouselHolder');
|
|
12739
|
+
carouselViewport = viewChild('carouselViewport');
|
|
12740
|
+
currentIndex = signal(0);
|
|
12741
|
+
timer = signal(null);
|
|
12742
|
+
autoplay = computed(() => this.config().autoplay ?? false);
|
|
12743
|
+
interval = computed(() => this.config().interval ?? 3000);
|
|
12744
|
+
perView = computed(() => Math.max(1, this.config().perView ?? 1));
|
|
12745
|
+
step = computed(() => Math.max(1, this.config().step ?? this.perView()));
|
|
12746
|
+
showDots = computed(() => this.config().showDots ?? true);
|
|
12747
|
+
showArrows = computed(() => this.config().showArrows ?? true);
|
|
12748
|
+
arrowsOutside = computed(() => this.config().arrowsOutside ?? false);
|
|
12749
|
+
itemsGap = computed(() => this.config().itemsGap ?? '0px');
|
|
12750
|
+
controlsOffset = computed(() => this.config().controlsOffset ?? '2rem');
|
|
12751
|
+
controlsSize = computed(() => this.config().controlsSize ?? '2.5rem');
|
|
12752
|
+
ariaLabel = computed(() => this.config().ariaLabel ?? 'Galería de imágenes');
|
|
12753
|
+
maxIndex = computed(() => Math.max(0, this.images().length - this.perView()));
|
|
12754
|
+
pagesLength = computed(() => Math.max(1, Math.ceil(this.images().length / this.perView())));
|
|
12755
|
+
dots = computed(() => Array.from({ length: this.pagesLength() }, (_, i) => i));
|
|
12756
|
+
currentPage = computed(() => Math.min(this.pagesLength() - 1, Math.floor(this.currentIndex() / this.perView())));
|
|
12757
|
+
carouselClasses = computed(() => {
|
|
12758
|
+
const classes = ['c-img-carousel', 'js-img-carousel'];
|
|
12759
|
+
if (this.arrowsOutside()) {
|
|
12760
|
+
classes.push('c-img-carousel--arrows-out');
|
|
12761
|
+
}
|
|
12762
|
+
return classes;
|
|
12763
|
+
});
|
|
12764
|
+
constructor() {
|
|
12765
|
+
effect(() => {
|
|
12766
|
+
const viewport = this.carouselViewport();
|
|
12767
|
+
if (viewport) {
|
|
12768
|
+
const element = viewport.nativeElement;
|
|
12769
|
+
element.style.setProperty('--per-view', this.perView().toString());
|
|
12770
|
+
element.style.setProperty('--items-gap', this.itemsGap());
|
|
12771
|
+
element.style.setProperty('--controls-offset', this.controlsOffset());
|
|
12772
|
+
element.style.setProperty('--controls-size', this.controlsSize());
|
|
12773
|
+
}
|
|
12774
|
+
});
|
|
12775
|
+
effect(() => {
|
|
12776
|
+
const shouldAutoplay = this.autoplay() && this.images().length > 1;
|
|
12777
|
+
const currentTimer = this.timer();
|
|
12778
|
+
if (shouldAutoplay && !currentTimer) {
|
|
12779
|
+
this.startAutoplay();
|
|
12780
|
+
}
|
|
12781
|
+
else if (!shouldAutoplay && currentTimer) {
|
|
12782
|
+
this.stopAutoplay();
|
|
12783
|
+
}
|
|
12784
|
+
});
|
|
12785
|
+
effect(() => {
|
|
12786
|
+
const holder = this.carouselHolder();
|
|
12787
|
+
const index = this.currentIndex();
|
|
12788
|
+
if (holder) {
|
|
12789
|
+
const element = holder.nativeElement;
|
|
12790
|
+
const percentage = -(index * (100 / this.perView()));
|
|
12791
|
+
element.style.transform = `translateX(${percentage}%)`;
|
|
12792
|
+
}
|
|
12793
|
+
});
|
|
12794
|
+
}
|
|
12795
|
+
ngAfterViewInit() {
|
|
12796
|
+
this.goToSlide(0, false);
|
|
12797
|
+
}
|
|
12798
|
+
ngOnDestroy() {
|
|
12799
|
+
this.stopAutoplay();
|
|
12800
|
+
}
|
|
12801
|
+
goToSlide(index, animate = true, fromAutoplay = false) {
|
|
12802
|
+
if (index < 0) {
|
|
12803
|
+
index = this.maxIndex();
|
|
12804
|
+
}
|
|
12805
|
+
else if (index > this.maxIndex()) {
|
|
12806
|
+
index = 0;
|
|
12807
|
+
}
|
|
12808
|
+
const holder = this.carouselHolder();
|
|
12809
|
+
if (holder) {
|
|
12810
|
+
holder.nativeElement.style.transition = animate ? 'transform 350ms ease' : 'none';
|
|
12811
|
+
}
|
|
12812
|
+
this.currentIndex.set(index);
|
|
12813
|
+
if (!fromAutoplay && this.autoplay()) {
|
|
12814
|
+
this.restartAutoplay();
|
|
12815
|
+
}
|
|
12816
|
+
}
|
|
12817
|
+
goToPage(pageIndex) {
|
|
12818
|
+
const targetSlide = Math.min(this.maxIndex(), Math.max(0, pageIndex * this.perView()));
|
|
12819
|
+
this.goToSlide(targetSlide, true, false);
|
|
12820
|
+
}
|
|
12821
|
+
goToNextSlide(fromAutoplay = false) {
|
|
12822
|
+
this.goToSlide(this.currentIndex() + this.step(), true, fromAutoplay);
|
|
12823
|
+
}
|
|
12824
|
+
goToPrevSlide() {
|
|
12825
|
+
this.goToSlide(this.currentIndex() - this.step(), true, false);
|
|
12826
|
+
}
|
|
12827
|
+
isDotActive(dotIndex) {
|
|
12828
|
+
return dotIndex === this.currentPage();
|
|
12829
|
+
}
|
|
12830
|
+
startAutoplay() {
|
|
12831
|
+
const currentTimer = this.timer();
|
|
12832
|
+
if (currentTimer) {
|
|
12833
|
+
clearInterval(currentTimer);
|
|
12834
|
+
}
|
|
12835
|
+
const intervalId = setInterval(() => {
|
|
12836
|
+
this.goToNextSlide(true);
|
|
12837
|
+
}, this.interval());
|
|
12838
|
+
this.timer.set(intervalId);
|
|
12839
|
+
}
|
|
12840
|
+
stopAutoplay() {
|
|
12841
|
+
const timerId = this.timer();
|
|
12842
|
+
if (timerId) {
|
|
12843
|
+
clearInterval(timerId);
|
|
12844
|
+
this.timer.set(null);
|
|
12845
|
+
}
|
|
12846
|
+
}
|
|
12847
|
+
restartAutoplay() {
|
|
12848
|
+
if (this.autoplay()) {
|
|
12849
|
+
this.startAutoplay();
|
|
12850
|
+
}
|
|
12851
|
+
}
|
|
12852
|
+
onResize() {
|
|
12853
|
+
this.goToSlide(this.currentIndex(), false);
|
|
12854
|
+
}
|
|
12855
|
+
onKeyDown(event) {
|
|
12856
|
+
if (event.key === 'ArrowLeft') {
|
|
12857
|
+
this.goToPrevSlide();
|
|
12858
|
+
}
|
|
12859
|
+
else if (event.key === 'ArrowRight') {
|
|
12860
|
+
this.goToNextSlide();
|
|
12861
|
+
}
|
|
12862
|
+
}
|
|
12863
|
+
getSlideStyle(index) {
|
|
12864
|
+
return {
|
|
12865
|
+
'flex': `0 0 ${100 / this.perView()}%`
|
|
12866
|
+
};
|
|
12867
|
+
}
|
|
12868
|
+
getImages() {
|
|
12869
|
+
return this.images();
|
|
12870
|
+
}
|
|
12871
|
+
getCarouselClasses() {
|
|
12872
|
+
return this.carouselClasses();
|
|
12873
|
+
}
|
|
12874
|
+
getShowArrows() {
|
|
12875
|
+
return this.showArrows() && this.images().length > this.perView();
|
|
12876
|
+
}
|
|
12877
|
+
getShowDots() {
|
|
12878
|
+
return this.showDots() && this.pagesLength() > 1;
|
|
12879
|
+
}
|
|
12880
|
+
getDots() {
|
|
12881
|
+
return this.dots();
|
|
12882
|
+
}
|
|
12883
|
+
getAriaLabel() {
|
|
12884
|
+
return this.ariaLabel();
|
|
12885
|
+
}
|
|
12886
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12887
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: CarouselComponent, isStandalone: true, selector: "core-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "carouselHolder", first: true, predicate: ["carouselHolder"], descendants: true, isSignal: true }, { propertyName: "carouselViewport", first: true, predicate: ["carouselViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<div \n [ngClass]=\"getCarouselClasses()\"\n [attr.aria-label]=\"getAriaLabel()\"\n tabindex=\"0\"\n #carouselViewport>\n \n <div class=\"c-img-carousel__viewport\">\n <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n <div \n *ngFor=\"let image of getImages(); let i = index\"\n class=\"c-img-carousel__slide js-img-carousel-slide\"\n [ngStyle]=\"getSlideStyle(i)\">\n <div class=\"c-img-carousel__slide-inner\">\n <img \n [src]=\"image.url\" \n [alt]=\"image.alt || 'Imagen ' + (i + 1)\"\n loading=\"lazy\">\n </div>\n </div>\n </div>\n \n <!-- Botones de navegaci\u00F3n -->\n <button \n *ngIf=\"getShowArrows()\"\n class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n type=\"button\"\n (click)=\"goToPrevSlide()\"\n [attr.aria-label]=\"'Anterior'\"\n data-control=\"prevBtn\">\n </button>\n \n <button \n *ngIf=\"getShowArrows()\"\n class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n type=\"button\"\n (click)=\"goToNextSlide()\"\n [attr.aria-label]=\"'Siguiente'\"\n data-control=\"nextBtn\">\n </button>\n \n <!-- Indicadores de navegaci\u00F3n (dots) -->\n <div \n *ngIf=\"getShowDots()\"\n class=\"c-img-carousel__dots js-img-carousel-nav\"\n aria-label=\"Navegaci\u00F3n\">\n <button\n *ngFor=\"let dot of getDots(); let i = index\"\n class=\"c-img-carousel__dot js-img-carousel-dot\"\n type=\"button\"\n (click)=\"goToPage(i)\"\n [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n [attr.aria-current]=\"isDotActive(i) ? 'true' : 'false'\">\n </button>\n </div>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12888
|
+
}
|
|
12889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
12890
|
+
type: Component,
|
|
12891
|
+
args: [{ selector: 'core-carousel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n [ngClass]=\"getCarouselClasses()\"\n [attr.aria-label]=\"getAriaLabel()\"\n tabindex=\"0\"\n #carouselViewport>\n \n <div class=\"c-img-carousel__viewport\">\n <div class=\"c-img-carousel__holder js-img-carousel-holder\" #carouselHolder>\n <div \n *ngFor=\"let image of getImages(); let i = index\"\n class=\"c-img-carousel__slide js-img-carousel-slide\"\n [ngStyle]=\"getSlideStyle(i)\">\n <div class=\"c-img-carousel__slide-inner\">\n <img \n [src]=\"image.url\" \n [alt]=\"image.alt || 'Imagen ' + (i + 1)\"\n loading=\"lazy\">\n </div>\n </div>\n </div>\n \n <!-- Botones de navegaci\u00F3n -->\n <button \n *ngIf=\"getShowArrows()\"\n class=\"c-img-carousel__btn c-img-carousel__btn--prev icon-arrow-left\"\n type=\"button\"\n (click)=\"goToPrevSlide()\"\n [attr.aria-label]=\"'Anterior'\"\n data-control=\"prevBtn\">\n </button>\n \n <button \n *ngIf=\"getShowArrows()\"\n class=\"c-img-carousel__btn c-img-carousel__btn--next icon-arrow-right\"\n type=\"button\"\n (click)=\"goToNextSlide()\"\n [attr.aria-label]=\"'Siguiente'\"\n data-control=\"nextBtn\">\n </button>\n \n <!-- Indicadores de navegaci\u00F3n (dots) -->\n <div \n *ngIf=\"getShowDots()\"\n class=\"c-img-carousel__dots js-img-carousel-nav\"\n aria-label=\"Navegaci\u00F3n\">\n <button\n *ngFor=\"let dot of getDots(); let i = index\"\n class=\"c-img-carousel__dot js-img-carousel-dot\"\n type=\"button\"\n (click)=\"goToPage(i)\"\n [attr.aria-label]=\"'Ir a p\u00E1gina ' + (i + 1)\"\n [attr.aria-current]=\"isDotActive(i) ? 'true' : 'false'\">\n </button>\n </div>\n </div>\n</div>" }]
|
|
12892
|
+
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
12893
|
+
type: HostListener,
|
|
12894
|
+
args: ['window:resize']
|
|
12895
|
+
}], onKeyDown: [{
|
|
12896
|
+
type: HostListener,
|
|
12897
|
+
args: ['keydown', ['$event']]
|
|
12898
|
+
}] } });
|
|
12899
|
+
|
|
12735
12900
|
class CacheBustingInterceptor {
|
|
12736
12901
|
intercept(req, next) {
|
|
12737
12902
|
if (req.url.includes('/assets/i18n/') && req.url.endsWith('.json')) {
|
|
@@ -13059,5 +13224,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
13059
13224
|
* Generated bundle index. Do not edit.
|
|
13060
13225
|
*/
|
|
13061
13226
|
|
|
13062
|
-
export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSliderComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SliderActionType, SliderDirection, SliderNavigationType, SliderService, SliderTransition, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
|
|
13227
|
+
export { ActiveFiltersComponent, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, CacheBustingInterceptor, CardComponent, CarouselComponent, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, DataListComponent, DataListItemComponent, DateFieldComponent, DateUtility, DatetimeFieldComponent, DialogActions, DocumentAction, DocumentDisplayMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, GenericButtonComponent, GenericDocumentationComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSidebarComponent, GenericSliderComponent, GenericStepsComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MainNavComponent, MainNavService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsInterceptor, PermissionsResources, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, ResetPasswordModel, RoleModel, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SliderActionType, SliderDirection, SliderNavigationType, SliderService, SliderTransition, SmartFieldComponent, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UsersModel, VERSION, equalToValidator, isSameDate, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader };
|
|
13063
13228
|
//# sourceMappingURL=solcre-org-core-ui.mjs.map
|