@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/_breadcrumb.scss CHANGED
@@ -1,92 +1,92 @@
1
- @use '../components/mixins' as mixins;
2
-
3
- .breadcrumb {
4
- font-size: 12px;
5
- color: #fff;
6
- position: absolute;
7
- z-index: 2;
8
- top: 60px;
9
- left: 0px;
10
- width: 100%;
11
-
12
- @include mixins.media-md {
13
- font-size: 14px;
14
- top: 120px;
15
- }
16
-
17
- &__container {
18
- @include mixins.container-wide();
19
- padding-top: 30px !important;
20
- }
21
-
22
- &__list {
23
- display: flex;
24
- align-items: center;
25
- list-style: none;
26
- margin: 0;
27
- padding: 0;
28
- }
29
-
30
- &__item {
31
- display: inline-flex;
32
- align-items: center;
33
- min-width: 0;
34
- }
35
-
36
- &__separator {
37
- margin: 0 5px;
38
- color: #ffffff;
39
- user-select: none;
40
- }
41
-
42
- &__link,
43
- &__current {
44
- display: inline-flex;
45
- align-items: center;
46
- padding: 2.5px 5px;
47
- border-radius: 0.5rem;
48
- white-space: nowrap;
49
- }
50
-
51
- &__link {
52
- color: #ffffffca;
53
- text-decoration: none;
54
-
55
- &:hover {
56
- background-color: transparent;
57
- color: #fff;
58
- }
59
-
60
- &:focus-visible {
61
- outline: none;
62
- }
63
- }
64
-
65
- &__current {
66
- font-weight: 600;
67
- }
68
-
69
- &__icon {
70
- svg {
71
- width: 14px;
72
- height: 14px;
73
- }
74
- }
75
-
76
- &--no-header {
77
- color: var(--tide-booking-color-primary);
78
- .breadcrumb {
79
- &__separator {
80
- color: var(--tide-booking-color-primary-light);
81
- }
82
-
83
- &__link {
84
- color: var(--tide-booking-color-primary-light);
85
-
86
- &:hover {
87
- color: var(--tide-booking-color-primary);
88
- }
89
- }
90
- }
91
- }
92
- }
1
+ @use '../components/mixins' as mixins;
2
+
3
+ .breadcrumb {
4
+ font-size: 12px;
5
+ color: #fff;
6
+ position: absolute;
7
+ z-index: 2;
8
+ top: 60px;
9
+ left: 0px;
10
+ width: 100%;
11
+
12
+ @include mixins.media-md {
13
+ font-size: 14px;
14
+ top: 120px;
15
+ }
16
+
17
+ &__container {
18
+ @include mixins.container-wide();
19
+ padding-top: 30px !important;
20
+ }
21
+
22
+ &__list {
23
+ display: flex;
24
+ align-items: center;
25
+ list-style: none;
26
+ margin: 0;
27
+ padding: 0;
28
+ }
29
+
30
+ &__item {
31
+ display: inline-flex;
32
+ align-items: center;
33
+ min-width: 0;
34
+ }
35
+
36
+ &__separator {
37
+ margin: 0 5px;
38
+ color: #ffffff;
39
+ user-select: none;
40
+ }
41
+
42
+ &__link,
43
+ &__current {
44
+ display: inline-flex;
45
+ align-items: center;
46
+ padding: 2.5px 5px;
47
+ border-radius: 0.5rem;
48
+ white-space: nowrap;
49
+ }
50
+
51
+ &__link {
52
+ color: #ffffffca;
53
+ text-decoration: none;
54
+
55
+ &:hover {
56
+ background-color: transparent;
57
+ color: #fff;
58
+ }
59
+
60
+ &:focus-visible {
61
+ outline: none;
62
+ }
63
+ }
64
+
65
+ &__current {
66
+ font-weight: 600;
67
+ }
68
+
69
+ &__icon {
70
+ svg {
71
+ width: 14px;
72
+ height: 14px;
73
+ }
74
+ }
75
+
76
+ &--no-header {
77
+ color: var(--tide-booking-color-primary);
78
+ .breadcrumb {
79
+ &__separator {
80
+ color: var(--tide-booking-color-primary-light);
81
+ }
82
+
83
+ &__link {
84
+ color: var(--tide-booking-color-primary-light);
85
+
86
+ &:hover {
87
+ color: var(--tide-booking-color-primary);
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
package/styles/components/_button.scss CHANGED
@@ -1,238 +1,238 @@
1
- .button {
2
- @extend %reset;
3
- border: none;
4
- background: transparent;
5
- cursor: pointer;
6
- outline: none;
7
- @extend %transition-easing;
8
-
9
- &:hover,
10
- &:focus,
11
- &:active {
12
- outline: none;
13
- }
14
-
15
- // &--close {
16
- // width: 4.5rem;
17
- // height: 4.5rem;
18
- // @include flex--centerXY;
19
- // border: none;
20
- // background: transparent;
21
-
22
- // &:before,
23
- // &:after {
24
- // content: "";
25
- // position: absolute;
26
- // width: 1.7rem;
27
- // height: 0.1rem;
28
- // background-color: $black;
29
- // }
30
-
31
- // &:before {
32
- // transform: rotate(45deg);
33
- // }
34
-
35
- // &:after {
36
- // transform: rotate(-45deg);
37
- // }
38
- // }
39
-
40
- // &--close-label {
41
- // position: relative;
42
- // height: $gutter * 2;
43
- // padding-right: $gutter * 1.33;
44
- // @include flex--centerY;
45
- // font-size: 1.3rem;
46
- // text-decoration: underline;
47
- // text-transform: uppercase;
48
- // color: $color-primary;
49
-
50
- // &:before,
51
- // &:after {
52
- // content: "";
53
- // position: absolute;
54
- // width: 1.2rem;
55
- // height: 0.1rem;
56
- // right: 0;
57
- // background-color: $black;
58
- // }
59
-
60
- // &:after {
61
- // transform: rotate(-45deg);
62
- // }
63
-
64
- // &:before {
65
- // transform: rotate(45deg);
66
- // }
67
- // }
68
-
69
- // &--collapse {
70
- // position: relative;
71
- // width: 3rem;
72
- // height: 3rem;
73
- // @include flex--centerXY;
74
- // border-radius: $gutter * 0.3;
75
- // border: 0.1rem solid fade-out($color-primary, 0.65);
76
- // background-color: $white;
77
-
78
- // &:before {
79
- // content: "";
80
- // width: 0.8rem;
81
- // height: 0.8rem;
82
- // margin-top: 0;
83
- // margin-left: -0.5rem;
84
- // border-bottom: 0.1rem solid $black;
85
- // border-left: 0.1rem solid $black;
86
- // transform-origin: 50%;
87
- // transform: rotate(-135deg);
88
- // @include transitionEasing($duration: 0.15s);
89
- // }
90
- // }
91
-
92
- &--clear {
93
- width: 25px;
94
- height: 25px;
95
- @include flex--centerXY;
96
- border: none;
97
- background: transparent;
98
-
99
- &:before,
100
- &:after {
101
- content: '';
102
- position: absolute;
103
- width: 16px;
104
- height: 1px;
105
- background-color: var(--tide-booking-form-typeahead-agent-clear-icon-color);
106
- }
107
-
108
- &:before {
109
- transform: rotate(45deg);
110
- }
111
-
112
- &:after {
113
- transform: rotate(-45deg);
114
- }
115
- }
116
-
117
- &--decrement,
118
- &--increment {
119
- position: relative;
120
- width: var(--tide-booking-decrement-increment-width);
121
- height: var(--tide-booking-decrement-increment-height);
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- flex: 0 0 var(--tide-booking-decrement-increment-width);
126
- border-radius: var(--tide-booking-decrement-increment-border-radius);
127
- border: var(--tide-booking-decrement-increment-border);
128
- background: var(--tide-booking-decrement-increment-background);
129
- transition: all 0.3s ease;
130
-
131
- .icon {
132
- position: relative;
133
- left: auto;
134
- top: auto;
135
- width: var(--tide-booking-decrement-increment-icon-width);
136
- height: var(--tide-booking-decrement-increment-icon-height);
137
- fill: var(--tide-booking-decrement-increment-icon-color);
138
- }
139
-
140
- &:hover {
141
- background: var(--tide-booking-decrement-increment-background-hover);
142
- color: var(--tide-booking-decrement-increment-color-hover);
143
- fill: var(--tide-booking-decrement-increment-icon-color-hover);
144
- border: var(--tide-booking-decrement-increment-border-hover);
145
-
146
- .icon {
147
- fill: var(--tide-booking-decrement-increment-icon-color-hover);
148
- }
149
- }
150
-
151
- &:focus,
152
- &:active {
153
- background: var(--tide-booking-decrement-increment-background-focus);
154
- color: var(--tide-booking-decrement-increment-color-focus);
155
- fill: var(--tide-booking-decrement-increment-icon-color-focus);
156
- border: var(--tide-booking-decrement-increment-border-focus);
157
-
158
- .icon {
159
- fill: var(--tide-booking-decrement-increment-icon-color-focus);
160
- }
161
- }
162
- }
163
-
164
- &--disabled {
165
- opacity: 0.5;
166
- pointer-events: none;
167
- cursor: not-allowed;
168
- }
169
-
170
- &--min,
171
- &--plus {
172
- position: relative;
173
- width: 3.5rem;
174
- height: 3.5rem;
175
- @include flex--centerXY;
176
- border-radius: 50%;
177
- background-color: var(--tide-booking-bg-secondary);
178
- @include activeToColor;
179
-
180
- &:hover {
181
- opacity: 1;
182
- outline: none;
183
- fill: var(--tide-booking-color-primary);
184
- color: var(--tide-booking-color-primary);
185
- background-color: var(--tide-booking-transparent);
186
- }
187
-
188
- &:before {
189
- content: '';
190
- position: absolute;
191
- width: 1.2rem;
192
- height: 0.2rem;
193
- display: inline-flex;
194
- background-color: var(--tide-booking-color-primary);
195
- }
196
- }
197
-
198
- &--plus {
199
- &:after {
200
- content: '';
201
- position: absolute;
202
- width: 1.2rem;
203
- height: 0.2rem;
204
- transform: rotate(90deg);
205
- display: inline-flex;
206
- background-color: var(--tide-booking-color-primary);
207
- }
208
- }
209
- }
210
-
211
- .typeahead__option .button {
212
- width: 100%;
213
- padding: 15px * 0.8 15px;
214
- flex-shrink: 0;
215
- text-align: left;
216
- color: var(--tide-booking-form-typeahead-agent-options-color);
217
- @extend %transition-easing;
218
-
219
- &:hover {
220
- color: var(--tide-booking-form-typeahead-agent-options-color-hover);
221
- background-color: var(--tide-booking-form-typeahead-agent-options-background-hover);
222
- }
223
- }
224
-
225
- .typeahead__option-header .button {
226
- padding: 15px * 0.67 15px;
227
- font-size: 15px;
228
- font-style: normal;
229
- }
230
-
231
- .typeahead__option--tree .typeahead__option-header .button {
232
- padding-left: 15px;
233
- }
234
-
235
- .form__group .typeahead .button--clear {
236
- position: absolute;
237
- right: 15px;
238
- }
1
+ .button {
2
+ @extend %reset;
3
+ border: none;
4
+ background: transparent;
5
+ cursor: pointer;
6
+ outline: none;
7
+ @extend %transition-easing;
8
+
9
+ &:hover,
10
+ &:focus,
11
+ &:active {
12
+ outline: none;
13
+ }
14
+
15
+ // &--close {
16
+ // width: 4.5rem;
17
+ // height: 4.5rem;
18
+ // @include flex--centerXY;
19
+ // border: none;
20
+ // background: transparent;
21
+
22
+ // &:before,
23
+ // &:after {
24
+ // content: "";
25
+ // position: absolute;
26
+ // width: 1.7rem;
27
+ // height: 0.1rem;
28
+ // background-color: $black;
29
+ // }
30
+
31
+ // &:before {
32
+ // transform: rotate(45deg);
33
+ // }
34
+
35
+ // &:after {
36
+ // transform: rotate(-45deg);
37
+ // }
38
+ // }
39
+
40
+ // &--close-label {
41
+ // position: relative;
42
+ // height: $gutter * 2;
43
+ // padding-right: $gutter * 1.33;
44
+ // @include flex--centerY;
45
+ // font-size: 1.3rem;
46
+ // text-decoration: underline;
47
+ // text-transform: uppercase;
48
+ // color: $color-primary;
49
+
50
+ // &:before,
51
+ // &:after {
52
+ // content: "";
53
+ // position: absolute;
54
+ // width: 1.2rem;
55
+ // height: 0.1rem;
56
+ // right: 0;
57
+ // background-color: $black;
58
+ // }
59
+
60
+ // &:after {
61
+ // transform: rotate(-45deg);
62
+ // }
63
+
64
+ // &:before {
65
+ // transform: rotate(45deg);
66
+ // }
67
+ // }
68
+
69
+ // &--collapse {
70
+ // position: relative;
71
+ // width: 3rem;
72
+ // height: 3rem;
73
+ // @include flex--centerXY;
74
+ // border-radius: $gutter * 0.3;
75
+ // border: 0.1rem solid fade-out($color-primary, 0.65);
76
+ // background-color: $white;
77
+
78
+ // &:before {
79
+ // content: "";
80
+ // width: 0.8rem;
81
+ // height: 0.8rem;
82
+ // margin-top: 0;
83
+ // margin-left: -0.5rem;
84
+ // border-bottom: 0.1rem solid $black;
85
+ // border-left: 0.1rem solid $black;
86
+ // transform-origin: 50%;
87
+ // transform: rotate(-135deg);
88
+ // @include transitionEasing($duration: 0.15s);
89
+ // }
90
+ // }
91
+
92
+ &--clear {
93
+ width: 25px;
94
+ height: 25px;
95
+ @include flex--centerXY;
96
+ border: none;
97
+ background: transparent;
98
+
99
+ &:before,
100
+ &:after {
101
+ content: '';
102
+ position: absolute;
103
+ width: 16px;
104
+ height: 1px;
105
+ background-color: var(--tide-booking-form-typeahead-agent-clear-icon-color);
106
+ }
107
+
108
+ &:before {
109
+ transform: rotate(45deg);
110
+ }
111
+
112
+ &:after {
113
+ transform: rotate(-45deg);
114
+ }
115
+ }
116
+
117
+ &--decrement,
118
+ &--increment {
119
+ position: relative;
120
+ width: var(--tide-booking-decrement-increment-width);
121
+ height: var(--tide-booking-decrement-increment-height);
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ flex: 0 0 var(--tide-booking-decrement-increment-width);
126
+ border-radius: var(--tide-booking-decrement-increment-border-radius);
127
+ border: var(--tide-booking-decrement-increment-border);
128
+ background: var(--tide-booking-decrement-increment-background);
129
+ transition: all 0.3s ease;
130
+
131
+ .icon {
132
+ position: relative;
133
+ left: auto;
134
+ top: auto;
135
+ width: var(--tide-booking-decrement-increment-icon-width);
136
+ height: var(--tide-booking-decrement-increment-icon-height);
137
+ fill: var(--tide-booking-decrement-increment-icon-color);
138
+ }
139
+
140
+ &:hover {
141
+ background: var(--tide-booking-decrement-increment-background-hover);
142
+ color: var(--tide-booking-decrement-increment-color-hover);
143
+ fill: var(--tide-booking-decrement-increment-icon-color-hover);
144
+ border: var(--tide-booking-decrement-increment-border-hover);
145
+
146
+ .icon {
147
+ fill: var(--tide-booking-decrement-increment-icon-color-hover);
148
+ }
149
+ }
150
+
151
+ &:focus,
152
+ &:active {
153
+ background: var(--tide-booking-decrement-increment-background-focus);
154
+ color: var(--tide-booking-decrement-increment-color-focus);
155
+ fill: var(--tide-booking-decrement-increment-icon-color-focus);
156
+ border: var(--tide-booking-decrement-increment-border-focus);
157
+
158
+ .icon {
159
+ fill: var(--tide-booking-decrement-increment-icon-color-focus);
160
+ }
161
+ }
162
+ }
163
+
164
+ &--disabled {
165
+ opacity: 0.5;
166
+ pointer-events: none;
167
+ cursor: not-allowed;
168
+ }
169
+
170
+ &--min,
171
+ &--plus {
172
+ position: relative;
173
+ width: 3.5rem;
174
+ height: 3.5rem;
175
+ @include flex--centerXY;
176
+ border-radius: 50%;
177
+ background-color: var(--tide-booking-bg-secondary);
178
+ @include activeToColor;
179
+
180
+ &:hover {
181
+ opacity: 1;
182
+ outline: none;
183
+ fill: var(--tide-booking-color-primary);
184
+ color: var(--tide-booking-color-primary);
185
+ background-color: var(--tide-booking-transparent);
186
+ }
187
+
188
+ &:before {
189
+ content: '';
190
+ position: absolute;
191
+ width: 1.2rem;
192
+ height: 0.2rem;
193
+ display: inline-flex;
194
+ background-color: var(--tide-booking-color-primary);
195
+ }
196
+ }
197
+
198
+ &--plus {
199
+ &:after {
200
+ content: '';
201
+ position: absolute;
202
+ width: 1.2rem;
203
+ height: 0.2rem;
204
+ transform: rotate(90deg);
205
+ display: inline-flex;
206
+ background-color: var(--tide-booking-color-primary);
207
+ }
208
+ }
209
+ }
210
+
211
+ .typeahead__option .button {
212
+ width: 100%;
213
+ padding: 15px * 0.8 15px;
214
+ flex-shrink: 0;
215
+ text-align: left;
216
+ color: var(--tide-booking-form-typeahead-agent-options-color);
217
+ @extend %transition-easing;
218
+
219
+ &:hover {
220
+ color: var(--tide-booking-form-typeahead-agent-options-color-hover);
221
+ background-color: var(--tide-booking-form-typeahead-agent-options-background-hover);
222
+ }
223
+ }
224
+
225
+ .typeahead__option-header .button {
226
+ padding: 15px * 0.67 15px;
227
+ font-size: 15px;
228
+ font-style: normal;
229
+ }
230
+
231
+ .typeahead__option--tree .typeahead__option-header .button {
232
+ padding-left: 15px;
233
+ }
234
+
235
+ .form__group .typeahead .button--clear {
236
+ position: absolute;
237
+ right: 15px;
238
+ }