@syncfusion/ej2-angular-navigations 20.1.47 → 20.1.55

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.
Files changed (187) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/ej2-angular-navigations.umd.js +1 -1
  3. package/dist/ej2-angular-navigations.umd.min.js +1 -1
  4. package/package.json +8 -8
  5. package/schematics/utils/lib-details.d.ts +2 -2
  6. package/schematics/utils/lib-details.js +2 -2
  7. package/schematics/utils/lib-details.ts +2 -2
  8. package/styles/accordion/bootstrap-dark.css +6 -94
  9. package/styles/accordion/bootstrap.css +6 -94
  10. package/styles/accordion/bootstrap4.css +9 -109
  11. package/styles/accordion/bootstrap5-dark.css +3 -88
  12. package/styles/accordion/bootstrap5.css +3 -88
  13. package/styles/accordion/fabric-dark.css +6 -90
  14. package/styles/accordion/fabric.css +6 -90
  15. package/styles/accordion/fluent-dark.css +6 -87
  16. package/styles/accordion/fluent.css +6 -87
  17. package/styles/accordion/highcontrast-light.css +10 -116
  18. package/styles/accordion/highcontrast.css +10 -116
  19. package/styles/accordion/material-dark.css +6 -93
  20. package/styles/accordion/material.css +6 -93
  21. package/styles/accordion/tailwind-dark.css +6 -93
  22. package/styles/accordion/tailwind.css +6 -93
  23. package/styles/bootstrap-dark.css +272 -2023
  24. package/styles/bootstrap.css +272 -2023
  25. package/styles/bootstrap4.css +278 -2086
  26. package/styles/bootstrap5-dark.css +268 -2064
  27. package/styles/bootstrap5.css +268 -2064
  28. package/styles/breadcrumb/bootstrap-dark.css +9 -91
  29. package/styles/breadcrumb/bootstrap.css +9 -91
  30. package/styles/breadcrumb/bootstrap4.css +9 -91
  31. package/styles/breadcrumb/bootstrap5-dark.css +9 -95
  32. package/styles/breadcrumb/bootstrap5.css +9 -95
  33. package/styles/breadcrumb/fabric-dark.css +9 -90
  34. package/styles/breadcrumb/fabric.css +9 -90
  35. package/styles/breadcrumb/fluent-dark.css +9 -83
  36. package/styles/breadcrumb/fluent.css +9 -83
  37. package/styles/breadcrumb/highcontrast-light.css +9 -92
  38. package/styles/breadcrumb/highcontrast.css +9 -92
  39. package/styles/breadcrumb/material-dark.css +9 -86
  40. package/styles/breadcrumb/material.css +9 -86
  41. package/styles/breadcrumb/tailwind-dark.css +16 -100
  42. package/styles/breadcrumb/tailwind.css +16 -100
  43. package/styles/carousel/bootstrap-dark.css +24 -43
  44. package/styles/carousel/bootstrap.css +24 -43
  45. package/styles/carousel/bootstrap4.css +24 -43
  46. package/styles/carousel/bootstrap5-dark.css +24 -43
  47. package/styles/carousel/bootstrap5.css +24 -43
  48. package/styles/carousel/fabric-dark.css +24 -43
  49. package/styles/carousel/fabric.css +24 -43
  50. package/styles/carousel/fluent-dark.css +24 -43
  51. package/styles/carousel/fluent.css +24 -43
  52. package/styles/carousel/highcontrast-light.css +24 -43
  53. package/styles/carousel/highcontrast.css +24 -43
  54. package/styles/carousel/material-dark.css +24 -43
  55. package/styles/carousel/material.css +24 -43
  56. package/styles/carousel/tailwind-dark.css +24 -43
  57. package/styles/carousel/tailwind.css +24 -43
  58. package/styles/context-menu/bootstrap-dark.css +6 -60
  59. package/styles/context-menu/bootstrap.css +6 -60
  60. package/styles/context-menu/bootstrap4.css +6 -60
  61. package/styles/context-menu/bootstrap5-dark.css +6 -60
  62. package/styles/context-menu/bootstrap5.css +6 -60
  63. package/styles/context-menu/fabric-dark.css +6 -60
  64. package/styles/context-menu/fabric.css +6 -60
  65. package/styles/context-menu/fluent-dark.css +6 -60
  66. package/styles/context-menu/fluent.css +6 -60
  67. package/styles/context-menu/highcontrast-light.css +6 -60
  68. package/styles/context-menu/highcontrast.css +6 -60
  69. package/styles/context-menu/material-dark.css +6 -60
  70. package/styles/context-menu/material.css +6 -60
  71. package/styles/context-menu/tailwind-dark.css +6 -60
  72. package/styles/context-menu/tailwind.css +6 -60
  73. package/styles/fabric-dark.css +263 -2008
  74. package/styles/fabric.css +263 -2008
  75. package/styles/fluent-dark.css +263 -2019
  76. package/styles/fluent.css +263 -2019
  77. package/styles/h-scroll/bootstrap-dark.css +11 -67
  78. package/styles/h-scroll/bootstrap.css +11 -67
  79. package/styles/h-scroll/bootstrap4.css +11 -69
  80. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  81. package/styles/h-scroll/bootstrap5.css +11 -68
  82. package/styles/h-scroll/fabric-dark.css +11 -67
  83. package/styles/h-scroll/fabric.css +11 -67
  84. package/styles/h-scroll/fluent-dark.css +11 -68
  85. package/styles/h-scroll/fluent.css +11 -68
  86. package/styles/h-scroll/highcontrast-light.css +11 -70
  87. package/styles/h-scroll/highcontrast.css +11 -70
  88. package/styles/h-scroll/material-dark.css +11 -68
  89. package/styles/h-scroll/material.css +11 -68
  90. package/styles/h-scroll/tailwind-dark.css +11 -68
  91. package/styles/h-scroll/tailwind.css +11 -68
  92. package/styles/highcontrast-light.css +268 -2080
  93. package/styles/highcontrast.css +268 -2083
  94. package/styles/material-dark.css +266 -1977
  95. package/styles/material.css +259 -1969
  96. package/styles/menu/bootstrap-dark.css +27 -201
  97. package/styles/menu/bootstrap.css +27 -201
  98. package/styles/menu/bootstrap4.css +28 -211
  99. package/styles/menu/bootstrap5-dark.css +27 -202
  100. package/styles/menu/bootstrap5.css +27 -202
  101. package/styles/menu/fabric-dark.css +27 -201
  102. package/styles/menu/fabric.css +27 -201
  103. package/styles/menu/fluent-dark.css +27 -204
  104. package/styles/menu/fluent.css +27 -204
  105. package/styles/menu/highcontrast-light.css +27 -201
  106. package/styles/menu/highcontrast.css +27 -201
  107. package/styles/menu/material-dark.css +27 -203
  108. package/styles/menu/material.css +27 -203
  109. package/styles/menu/tailwind-dark.css +27 -202
  110. package/styles/menu/tailwind.css +27 -202
  111. package/styles/sidebar/bootstrap-dark.css +12 -27
  112. package/styles/sidebar/bootstrap.css +12 -27
  113. package/styles/sidebar/bootstrap4.css +12 -27
  114. package/styles/sidebar/bootstrap5-dark.css +10 -25
  115. package/styles/sidebar/bootstrap5.css +10 -25
  116. package/styles/sidebar/fabric-dark.css +12 -27
  117. package/styles/sidebar/fabric.css +12 -27
  118. package/styles/sidebar/fluent-dark.css +10 -25
  119. package/styles/sidebar/fluent.css +10 -25
  120. package/styles/sidebar/highcontrast-light.css +12 -27
  121. package/styles/sidebar/highcontrast.css +12 -27
  122. package/styles/sidebar/material-dark.css +12 -27
  123. package/styles/sidebar/material.css +12 -27
  124. package/styles/sidebar/tailwind-dark.css +10 -25
  125. package/styles/sidebar/tailwind.css +10 -25
  126. package/styles/tab/bootstrap-dark.css +150 -963
  127. package/styles/tab/bootstrap.css +150 -963
  128. package/styles/tab/bootstrap4.css +150 -970
  129. package/styles/tab/bootstrap5-dark.css +150 -975
  130. package/styles/tab/bootstrap5.css +150 -975
  131. package/styles/tab/fabric-dark.css +141 -954
  132. package/styles/tab/fabric.css +141 -954
  133. package/styles/tab/fluent-dark.css +143 -949
  134. package/styles/tab/fluent.css +143 -949
  135. package/styles/tab/highcontrast-light.css +142 -980
  136. package/styles/tab/highcontrast.css +142 -980
  137. package/styles/tab/material-dark.css +144 -916
  138. package/styles/tab/material.css +137 -909
  139. package/styles/tab/tailwind-dark.css +137 -907
  140. package/styles/tab/tailwind.css +137 -907
  141. package/styles/tailwind-dark.css +264 -1996
  142. package/styles/tailwind.css +264 -1996
  143. package/styles/toolbar/bootstrap-dark.css +7 -246
  144. package/styles/toolbar/bootstrap.css +7 -246
  145. package/styles/toolbar/bootstrap4.css +8 -258
  146. package/styles/toolbar/bootstrap5-dark.css +7 -251
  147. package/styles/toolbar/bootstrap5.css +7 -251
  148. package/styles/toolbar/fabric-dark.css +7 -245
  149. package/styles/toolbar/fabric.css +7 -245
  150. package/styles/toolbar/fluent-dark.css +7 -244
  151. package/styles/toolbar/fluent.css +7 -244
  152. package/styles/toolbar/highcontrast-light.css +7 -257
  153. package/styles/toolbar/highcontrast.css +7 -257
  154. package/styles/toolbar/material-dark.css +7 -248
  155. package/styles/toolbar/material.css +7 -248
  156. package/styles/toolbar/tailwind-dark.css +7 -245
  157. package/styles/toolbar/tailwind.css +7 -245
  158. package/styles/treeview/bootstrap-dark.css +23 -191
  159. package/styles/treeview/bootstrap.css +23 -191
  160. package/styles/treeview/bootstrap4.css +24 -208
  161. package/styles/treeview/bootstrap5-dark.css +24 -217
  162. package/styles/treeview/bootstrap5.css +24 -217
  163. package/styles/treeview/fabric-dark.css +23 -191
  164. package/styles/treeview/fabric.css +23 -191
  165. package/styles/treeview/fluent-dark.css +23 -216
  166. package/styles/treeview/fluent.css +23 -216
  167. package/styles/treeview/highcontrast-light.css +23 -191
  168. package/styles/treeview/highcontrast.css +23 -194
  169. package/styles/treeview/material-dark.css +23 -192
  170. package/styles/treeview/material.css +23 -191
  171. package/styles/treeview/tailwind-dark.css +23 -213
  172. package/styles/treeview/tailwind.css +23 -213
  173. package/styles/v-scroll/bootstrap-dark.css +7 -50
  174. package/styles/v-scroll/bootstrap.css +7 -50
  175. package/styles/v-scroll/bootstrap4.css +7 -50
  176. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  177. package/styles/v-scroll/bootstrap5.css +7 -50
  178. package/styles/v-scroll/fabric-dark.css +7 -50
  179. package/styles/v-scroll/fabric.css +7 -50
  180. package/styles/v-scroll/fluent-dark.css +7 -50
  181. package/styles/v-scroll/fluent.css +7 -50
  182. package/styles/v-scroll/highcontrast-light.css +7 -53
  183. package/styles/v-scroll/highcontrast.css +7 -53
  184. package/styles/v-scroll/material-dark.css +7 -51
  185. package/styles/v-scroll/material.css +7 -51
  186. package/styles/v-scroll/tailwind-dark.css +7 -50
  187. package/styles/v-scroll/tailwind.css +7 -50
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component bootstrap5 theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e765';
3
+ content: "\e765";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e748';
6
+ content: "\e748";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e70c';
9
+ content: "\e70c";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e77b';
12
+ content: "\e77b";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e748';
15
+ content: "\e748";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e765';
18
+ content: "\e765";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 4px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 2px;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 20px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #0d6efd;
235
216
  border-color: #0d6efd;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component fabric-dark theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e654';
3
+ content: "\e654";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e219';
6
+ content: "\e219";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e327';
9
+ content: "\e327";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e325';
12
+ content: "\e325";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e219';
15
+ content: "\e219";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e654';
18
+ content: "\e654";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 6px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 50%;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 12px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #0074cc;
235
216
  border-color: #0074cc;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component fabric theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e654';
3
+ content: "\e654";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e219';
6
+ content: "\e219";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e327';
9
+ content: "\e327";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e325';
12
+ content: "\e325";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e219';
15
+ content: "\e219";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e654';
18
+ content: "\e654";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 6px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 50%;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 12px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #0078d6;
235
216
  border-color: #0078d6;
236
- }
217
+ }