@qite/tide-components 1.0.13-preview.0 → 1.0.14

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 (93) hide show
  1. package/build/build-cjs/index.js +1664 -2414
  2. package/build/build-cjs/src/booking-wizard/features/booking/selectors.d.ts +1 -1
  3. package/build/build-cjs/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  4. package/build/build-cjs/src/booking-wizard/types.d.ts +3 -23
  5. package/build/build-cjs/src/search-results/components/flight/flight-selection/independent-flight-option.d.ts +0 -2
  6. package/build/build-cjs/src/search-results/components/itinerary/index.d.ts +0 -1
  7. package/build/build-cjs/src/search-results/components/itinerary/itinerary-utils.d.ts +0 -1
  8. package/build/build-cjs/src/search-results/types.d.ts +0 -8
  9. package/build/build-cjs/src/search-results/utils/traject-utils.d.ts +0 -7
  10. package/build/build-cjs/src/shared/booking/travelers-form.d.ts +8 -13
  11. package/build/build-esm/index.js +1666 -2416
  12. package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts +1 -1
  13. package/build/build-esm/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  14. package/build/build-esm/src/booking-wizard/types.d.ts +3 -23
  15. package/build/build-esm/src/search-results/components/flight/flight-selection/independent-flight-option.d.ts +0 -2
  16. package/build/build-esm/src/search-results/components/itinerary/index.d.ts +0 -1
  17. package/build/build-esm/src/search-results/components/itinerary/itinerary-utils.d.ts +0 -1
  18. package/build/build-esm/src/search-results/types.d.ts +0 -8
  19. package/build/build-esm/src/search-results/utils/traject-utils.d.ts +0 -7
  20. package/build/build-esm/src/shared/booking/travelers-form.d.ts +8 -13
  21. package/package.json +2 -2
  22. package/styles/abstracts/_mixins.scss +74 -74
  23. package/styles/abstracts/_variables.scss +57 -57
  24. package/styles/base/_fonts.scss +2 -2
  25. package/styles/base/_normalize.scss +227 -227
  26. package/styles/base/_typography.scss +35 -35
  27. package/styles/booking-joker-variables.scss +596 -596
  28. package/styles/booking-product-variables.scss +330 -330
  29. package/styles/booking-product.scss +438 -438
  30. package/styles/booking-qsm-variables.scss +501 -501
  31. package/styles/booking-qsm.scss +52 -52
  32. package/styles/booking-search-results-variables.scss +734 -734
  33. package/styles/booking-search-results.scss +53 -53
  34. package/styles/booking-wizard-variables.scss +603 -603
  35. package/styles/booking-wizard.scss +61 -61
  36. package/styles/components/_accordion.scss +67 -67
  37. package/styles/components/_animations.scss +39 -39
  38. package/styles/components/_base.scss +107 -107
  39. package/styles/components/_booking.scss +906 -906
  40. package/styles/components/_breadcrumb.scss +92 -92
  41. package/styles/components/_button.scss +238 -238
  42. package/styles/components/_checkbox.scss +230 -230
  43. package/styles/components/_contact.scss +255 -255
  44. package/styles/components/_content.scss +336 -336
  45. package/styles/components/_cta.scss +238 -238
  46. package/styles/components/_date-list.scss +41 -41
  47. package/styles/components/_date-range-picker.scss +223 -223
  48. package/styles/components/_decrement-increment.scss +35 -35
  49. package/styles/components/_dropdown.scss +77 -77
  50. package/styles/components/_error.scss +50 -50
  51. package/styles/components/_faq.scss +30 -30
  52. package/styles/components/_flight-option.scss +1444 -1432
  53. package/styles/components/_flyin.scss +830 -830
  54. package/styles/components/_footer.scss +135 -135
  55. package/styles/components/_form.scss +1704 -1704
  56. package/styles/components/_gallery.scss +317 -317
  57. package/styles/components/_header.scss +113 -113
  58. package/styles/components/_image-with-text.scss +206 -206
  59. package/styles/components/_img-slider.scss +175 -175
  60. package/styles/components/_info-message.scss +75 -75
  61. package/styles/components/_input.scss +35 -35
  62. package/styles/components/_list.scss +185 -185
  63. package/styles/components/_loader.scss +152 -152
  64. package/styles/components/_login.scss +140 -140
  65. package/styles/components/_map-view.scss +1100 -1100
  66. package/styles/components/_mixins.scss +579 -579
  67. package/styles/components/_navbar.scss +765 -765
  68. package/styles/components/_passenger-picker.scss +306 -306
  69. package/styles/components/_phone-input.scss +8 -8
  70. package/styles/components/_placeholders.scss +165 -165
  71. package/styles/components/_pricing-summary.scss +163 -163
  72. package/styles/components/_qsm.scss +17 -17
  73. package/styles/components/_radiobutton.scss +170 -170
  74. package/styles/components/_search.scss +2197 -2197
  75. package/styles/components/_select-wrapper.scss +81 -81
  76. package/styles/components/_slider.scss +120 -120
  77. package/styles/components/_spinner.scss +29 -29
  78. package/styles/components/_step-indicators.scss +187 -187
  79. package/styles/components/_table.scss +81 -81
  80. package/styles/components/_tide-form.scss +578 -578
  81. package/styles/components/_tree.scss +648 -648
  82. package/styles/components/_typeahead.scss +275 -275
  83. package/styles/components/_variables.scss +89 -89
  84. package/styles/content-blocks-variables.scss +543 -543
  85. package/styles/content-blocks.scss +66 -66
  86. package/styles/font.scss +2 -2
  87. package/styles/qsm/_calendar.scss +274 -274
  88. package/styles/qsm/_qsm.scss +1097 -1097
  89. package/styles/search.scss +1200 -1200
  90. package/styles/tide-form-variables.scss +275 -275
  91. package/styles/tide-form.scss +56 -56
  92. package/build/build-cjs/src/search-results/utils/booked-entry-utils.d.ts +0 -20
  93. package/build/build-esm/src/search-results/utils/booked-entry-utils.d.ts +0 -20
package/styles/components/_cta.scss CHANGED
@@ -1,238 +1,238 @@
1
- .cta {
2
- @extend %cta;
3
- @extend %transition-easing;
4
-
5
- // &:not(&--disabled) {
6
- // opacity: 1;
7
- // outline: none;
8
- // fill: var(--tide-booking-cta-icon-color);
9
- // color: var(--tide-booking-cta-color);
10
- // background: var(--tide-booking-cta-background);
11
- // }
12
-
13
- @include media-xl {
14
- //font-size: 1.7rem;
15
- }
16
-
17
- &--add {
18
- @include media-xs {
19
- margin: var(--tide-booking-cta-margin-secondary);
20
- }
21
-
22
- span {
23
- display: flex;
24
- align-items: center;
25
- gap: 5px;
26
- }
27
- }
28
-
29
- &--disabled {
30
- opacity: 0.5;
31
- pointer-events: none;
32
- cursor: not-allowed;
33
-
34
- &:hover,
35
- &:focus,
36
- &:active {
37
- opacity: 0.5;
38
- }
39
- }
40
-
41
- &--icon {
42
- flex-shrink: 0;
43
- white-space: nowrap;
44
- }
45
-
46
- &--secondary {
47
- @extend %cta--secondary;
48
-
49
- // &:not(&--disabled) {
50
- // opacity: 1;
51
- // outline: none;
52
- // fill: var(--tide-booking-cta-icon-color-secondary);
53
- // color: var(--tide-booking-cta-color-secondary);
54
- // background: var(--tide-booking-cta-background-secondary);
55
- // }
56
-
57
- .icon {
58
- width: 16px;
59
- height: 16px;
60
- }
61
- }
62
-
63
- &--select {
64
- background: var(--tide-booking-cta-background-select);
65
- color: var(--tide-booking-cta-color-select);
66
- border: var(--tide-booking-cta-border-select);
67
- border-radius: var(--tide-booking-cta-border-radius-select);
68
-
69
- &:hover,
70
- &:focus,
71
- &:active {
72
- border: var(--tide-booking-cta-border-select-hover);
73
- background: var(--tide-booking-cta-background-select-hover);
74
- color: var(--tide-booking-cta-color-select-hover);
75
- }
76
- }
77
-
78
- &--selected {
79
- background: var(--tide-booking-cta-background-selected);
80
- color: var(--tide-booking-cta-color-selected);
81
- border: var(--tide-booking-cta-border-selected);
82
- border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
83
-
84
- &:before {
85
- content: '';
86
- width: 13px;
87
- height: 6px;
88
- margin-right: 8px;
89
- display: inline-flex;
90
- flex-shrink: 0;
91
- border-left: 1.5px solid var(--tide-booking-cta-color-selected-icon);
92
- border-bottom: 1.5px solid var(--tide-booking-cta-color-selected-icon);
93
- transform: rotate(-45deg) translate3D(2px, -1px, 0);
94
- }
95
-
96
- &:hover,
97
- &:focus,
98
- &:active {
99
- border: var(--tide-booking-cta-border-selected);
100
- background: var(--tide-booking-cta-background-selected);
101
- color: var(--tide-booking-cta-color-selected);
102
- }
103
- }
104
-
105
- &--filter {
106
- position: absolute;
107
- right: 0px;
108
- top: -55px;
109
- width: auto;
110
- display: flex;
111
- align-items: center;
112
- padding: 10px;
113
- gap: 5px;
114
- background: var(--tide-booking-flight-options-filter-btn-background);
115
- color: var(--tide-booking-flight-options-filter-btn-color);
116
- border: var(--tide-booking-flight-options-filter-btn-border);
117
- border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
118
-
119
- @include media-xs {
120
- padding: var(--tide-booking-cta-padding);
121
- }
122
-
123
- span {
124
- display: none;
125
-
126
- @include media-xs {
127
- display: flex;
128
- }
129
- }
130
-
131
- svg {
132
- fill: var(--tide-booking-flight-options-filter-btn-icon-color);
133
- }
134
-
135
- &:hover,
136
- &:focus,
137
- &:active {
138
- border: var(--tide-booking-flight-options-filter-btn-hover-border);
139
- background: var(--tide-booking-flight-options-filter-btn-hover-background);
140
- color: var(--tide-booking-flight-options-filter-btn-hover-color);
141
-
142
- svg {
143
- fill: var(--tide-booking-flight-options-filter-btn-hover-icon-color);
144
- }
145
- }
146
- }
147
-
148
- &--close {
149
- padding: 0px;
150
- background: transparent;
151
- border: none;
152
- position: absolute;
153
- top: -5px;
154
- right: 0px;
155
- justify-content: flex-end;
156
-
157
- .icon {
158
- width: 25px;
159
- height: 25px;
160
- fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
161
- }
162
-
163
- &:hover,
164
- &:focus,
165
- &:active {
166
- border: none;
167
- background: transparent;
168
-
169
- .icon {
170
- fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
171
- }
172
- }
173
- }
174
-
175
- &--add-remove {
176
- padding: 5px;
177
- background: var(--tide-booking-form-summary-voucher-remove-btn-background);
178
- border: var(--tide-booking-form-summary-voucher-remove-btn-border);
179
- border-radius: var(--tide-booking-form-summary-voucher-remove-btn-border-radius);
180
- display: flex;
181
- justify-content: center;
182
- align-items: center;
183
- @extend %transition-easing;
184
-
185
- .icon {
186
- width: 16px;
187
- height: 16px;
188
- fill: var(--tide-booking-form-summary-voucher-remove-btn-color);
189
- @extend %transition-easing;
190
- }
191
-
192
- &:hover,
193
- &:focus,
194
- &:active {
195
- border: var(--tide-booking-form-summary-voucher-remove-btn-border-hover);
196
- background: var(--tide-booking-form-summary-voucher-remove-btn-background-hover);
197
-
198
- .icon {
199
- fill: var(--tide-booking-form-summary-voucher-remove-btn-color-hover);
200
- }
201
- }
202
- }
203
-
204
- &--remove {
205
- height: var(--tide-booking-cta-height-remove);
206
- width: var(--tide-booking-cta-width-remove);
207
- padding: var(--tide-booking-cta-padding-remove);
208
- color: var(--tide-booking-cta-color-remove);
209
- text-decoration: var(--tide-booking-cta-text-decoration-remove);
210
- background: var(--tide-booking-cta-background-remove);
211
- border: var(--tide-booking-cta-border-remove);
212
- border-radius: var(--tide-booking-cta-border-radius-remove);
213
- display: flex;
214
- justify-content: center;
215
- align-items: center;
216
- @extend %transition-easing;
217
-
218
- .icon {
219
- width: var(--tide-booking-cta-icon-size-remove);
220
- height: var(--tide-booking-cta-icon-size-remove);
221
- fill: var(--tide-booking-cta-icon-color-remove);
222
- @extend %transition-easing;
223
- }
224
-
225
- &:hover,
226
- &:focus,
227
- &:active {
228
- background: var(--tide-booking-cta-background-remove-hover);
229
- color: var(--tide-booking-cta-color-remove-hover);
230
- text-decoration: var(--tide-booking-cta-text-decoration-remove-hover);
231
- border: var(--tide-booking-cta-border-remove-hover);
232
-
233
- .icon {
234
- fill: var(--tide-booking-cta-icon-color-remove-hover);
235
- }
236
- }
237
- }
238
- }
1
+ .cta {
2
+ @extend %cta;
3
+ @extend %transition-easing;
4
+
5
+ // &:not(&--disabled) {
6
+ // opacity: 1;
7
+ // outline: none;
8
+ // fill: var(--tide-booking-cta-icon-color);
9
+ // color: var(--tide-booking-cta-color);
10
+ // background: var(--tide-booking-cta-background);
11
+ // }
12
+
13
+ @include media-xl {
14
+ //font-size: 1.7rem;
15
+ }
16
+
17
+ &--add {
18
+ @include media-xs {
19
+ margin: var(--tide-booking-cta-margin-secondary);
20
+ }
21
+
22
+ span {
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 5px;
26
+ }
27
+ }
28
+
29
+ &--disabled {
30
+ opacity: 0.5;
31
+ pointer-events: none;
32
+ cursor: not-allowed;
33
+
34
+ &:hover,
35
+ &:focus,
36
+ &:active {
37
+ opacity: 0.5;
38
+ }
39
+ }
40
+
41
+ &--icon {
42
+ flex-shrink: 0;
43
+ white-space: nowrap;
44
+ }
45
+
46
+ &--secondary {
47
+ @extend %cta--secondary;
48
+
49
+ // &:not(&--disabled) {
50
+ // opacity: 1;
51
+ // outline: none;
52
+ // fill: var(--tide-booking-cta-icon-color-secondary);
53
+ // color: var(--tide-booking-cta-color-secondary);
54
+ // background: var(--tide-booking-cta-background-secondary);
55
+ // }
56
+
57
+ .icon {
58
+ width: 16px;
59
+ height: 16px;
60
+ }
61
+ }
62
+
63
+ &--select {
64
+ background: var(--tide-booking-cta-background-select);
65
+ color: var(--tide-booking-cta-color-select);
66
+ border: var(--tide-booking-cta-border-select);
67
+ border-radius: var(--tide-booking-cta-border-radius-select);
68
+
69
+ &:hover,
70
+ &:focus,
71
+ &:active {
72
+ border: var(--tide-booking-cta-border-select-hover);
73
+ background: var(--tide-booking-cta-background-select-hover);
74
+ color: var(--tide-booking-cta-color-select-hover);
75
+ }
76
+ }
77
+
78
+ &--selected {
79
+ background: var(--tide-booking-cta-background-selected);
80
+ color: var(--tide-booking-cta-color-selected);
81
+ border: var(--tide-booking-cta-border-selected);
82
+ border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
83
+
84
+ &:before {
85
+ content: '';
86
+ width: 13px;
87
+ height: 6px;
88
+ margin-right: 8px;
89
+ display: inline-flex;
90
+ flex-shrink: 0;
91
+ border-left: 1.5px solid var(--tide-booking-cta-color-selected-icon);
92
+ border-bottom: 1.5px solid var(--tide-booking-cta-color-selected-icon);
93
+ transform: rotate(-45deg) translate3D(2px, -1px, 0);
94
+ }
95
+
96
+ &:hover,
97
+ &:focus,
98
+ &:active {
99
+ border: var(--tide-booking-cta-border-selected);
100
+ background: var(--tide-booking-cta-background-selected);
101
+ color: var(--tide-booking-cta-color-selected);
102
+ }
103
+ }
104
+
105
+ &--filter {
106
+ position: absolute;
107
+ right: 0px;
108
+ top: -55px;
109
+ width: auto;
110
+ display: flex;
111
+ align-items: center;
112
+ padding: 10px;
113
+ gap: 5px;
114
+ background: var(--tide-booking-flight-options-filter-btn-background);
115
+ color: var(--tide-booking-flight-options-filter-btn-color);
116
+ border: var(--tide-booking-flight-options-filter-btn-border);
117
+ border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
118
+
119
+ @include media-xs {
120
+ padding: var(--tide-booking-cta-padding);
121
+ }
122
+
123
+ span {
124
+ display: none;
125
+
126
+ @include media-xs {
127
+ display: flex;
128
+ }
129
+ }
130
+
131
+ svg {
132
+ fill: var(--tide-booking-flight-options-filter-btn-icon-color);
133
+ }
134
+
135
+ &:hover,
136
+ &:focus,
137
+ &:active {
138
+ border: var(--tide-booking-flight-options-filter-btn-hover-border);
139
+ background: var(--tide-booking-flight-options-filter-btn-hover-background);
140
+ color: var(--tide-booking-flight-options-filter-btn-hover-color);
141
+
142
+ svg {
143
+ fill: var(--tide-booking-flight-options-filter-btn-hover-icon-color);
144
+ }
145
+ }
146
+ }
147
+
148
+ &--close {
149
+ padding: 0px;
150
+ background: transparent;
151
+ border: none;
152
+ position: absolute;
153
+ top: -5px;
154
+ right: 0px;
155
+ justify-content: flex-end;
156
+
157
+ .icon {
158
+ width: 25px;
159
+ height: 25px;
160
+ fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
161
+ }
162
+
163
+ &:hover,
164
+ &:focus,
165
+ &:active {
166
+ border: none;
167
+ background: transparent;
168
+
169
+ .icon {
170
+ fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
171
+ }
172
+ }
173
+ }
174
+
175
+ &--add-remove {
176
+ padding: 5px;
177
+ background: var(--tide-booking-form-summary-voucher-remove-btn-background);
178
+ border: var(--tide-booking-form-summary-voucher-remove-btn-border);
179
+ border-radius: var(--tide-booking-form-summary-voucher-remove-btn-border-radius);
180
+ display: flex;
181
+ justify-content: center;
182
+ align-items: center;
183
+ @extend %transition-easing;
184
+
185
+ .icon {
186
+ width: 16px;
187
+ height: 16px;
188
+ fill: var(--tide-booking-form-summary-voucher-remove-btn-color);
189
+ @extend %transition-easing;
190
+ }
191
+
192
+ &:hover,
193
+ &:focus,
194
+ &:active {
195
+ border: var(--tide-booking-form-summary-voucher-remove-btn-border-hover);
196
+ background: var(--tide-booking-form-summary-voucher-remove-btn-background-hover);
197
+
198
+ .icon {
199
+ fill: var(--tide-booking-form-summary-voucher-remove-btn-color-hover);
200
+ }
201
+ }
202
+ }
203
+
204
+ &--remove {
205
+ height: var(--tide-booking-cta-height-remove);
206
+ width: var(--tide-booking-cta-width-remove);
207
+ padding: var(--tide-booking-cta-padding-remove);
208
+ color: var(--tide-booking-cta-color-remove);
209
+ text-decoration: var(--tide-booking-cta-text-decoration-remove);
210
+ background: var(--tide-booking-cta-background-remove);
211
+ border: var(--tide-booking-cta-border-remove);
212
+ border-radius: var(--tide-booking-cta-border-radius-remove);
213
+ display: flex;
214
+ justify-content: center;
215
+ align-items: center;
216
+ @extend %transition-easing;
217
+
218
+ .icon {
219
+ width: var(--tide-booking-cta-icon-size-remove);
220
+ height: var(--tide-booking-cta-icon-size-remove);
221
+ fill: var(--tide-booking-cta-icon-color-remove);
222
+ @extend %transition-easing;
223
+ }
224
+
225
+ &:hover,
226
+ &:focus,
227
+ &:active {
228
+ background: var(--tide-booking-cta-background-remove-hover);
229
+ color: var(--tide-booking-cta-color-remove-hover);
230
+ text-decoration: var(--tide-booking-cta-text-decoration-remove-hover);
231
+ border: var(--tide-booking-cta-border-remove-hover);
232
+
233
+ .icon {
234
+ fill: var(--tide-booking-cta-icon-color-remove-hover);
235
+ }
236
+ }
237
+ }
238
+ }
package/styles/components/_date-list.scss CHANGED
@@ -1,41 +1,41 @@
1
- .date-list {
2
- display: flex;
3
- }
4
-
5
- .date-list__item + .date-list__item:before {
6
- content: '';
7
- width: 5px;
8
- height: 5px;
9
- margin: 0 5px 0 3px;
10
- display: inline-flex;
11
- border-right: 1.5px solid var(--tide-booking-radiobutton-color-text);
12
- border-bottom: 1.5px solid var(--tide-booking-radiobutton-color-text);
13
- transform: rotate(-45deg) translate3D(1px, -3px, 0);
14
-
15
- @include media-lg {
16
- width: 7px;
17
- height: 7px;
18
- transform: rotate(-45deg) translate3D(3px, -1px, 0);
19
- }
20
- }
21
-
22
- .tree {
23
- .date-list {
24
- margin: 15px * 0.3 0 0 0;
25
-
26
- @include media-md {
27
- width: 180px;
28
- margin: 0;
29
- }
30
-
31
- @include media-xl {
32
- width: 200px;
33
- }
34
- }
35
-
36
- &--selected {
37
- .date-list__item + .date-list__item:before {
38
- border-color: var(--tide-booking-input-selected-color);
39
- }
40
- }
41
- }
1
+ .date-list {
2
+ display: flex;
3
+ }
4
+
5
+ .date-list__item + .date-list__item:before {
6
+ content: '';
7
+ width: 5px;
8
+ height: 5px;
9
+ margin: 0 5px 0 3px;
10
+ display: inline-flex;
11
+ border-right: 1.5px solid var(--tide-booking-radiobutton-color-text);
12
+ border-bottom: 1.5px solid var(--tide-booking-radiobutton-color-text);
13
+ transform: rotate(-45deg) translate3D(1px, -3px, 0);
14
+
15
+ @include media-lg {
16
+ width: 7px;
17
+ height: 7px;
18
+ transform: rotate(-45deg) translate3D(3px, -1px, 0);
19
+ }
20
+ }
21
+
22
+ .tree {
23
+ .date-list {
24
+ margin: 15px * 0.3 0 0 0;
25
+
26
+ @include media-md {
27
+ width: 180px;
28
+ margin: 0;
29
+ }
30
+
31
+ @include media-xl {
32
+ width: 200px;
33
+ }
34
+ }
35
+
36
+ &--selected {
37
+ .date-list__item + .date-list__item:before {
38
+ border-color: var(--tide-booking-input-selected-color);
39
+ }
40
+ }
41
+ }