@travelswitchhq/flight-search-react 1.0.8 → 1.1.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.
package/dist/index.d.cts CHANGED
@@ -39,6 +39,7 @@ type FlightSearchWidgetProps = {
39
39
  primary?: string;
40
40
  secondary?: string;
41
41
  primaryLight?: string;
42
+ secondaryBgText?: string;
42
43
  };
43
44
  redirectionDomain?: string;
44
45
  fontName?: string;
package/dist/index.d.ts CHANGED
@@ -39,6 +39,7 @@ type FlightSearchWidgetProps = {
39
39
  primary?: string;
40
40
  secondary?: string;
41
41
  primaryLight?: string;
42
+ secondaryBgText?: string;
42
43
  };
43
44
  redirectionDomain?: string;
44
45
  fontName?: string;
package/dist/index.mjs CHANGED
@@ -40,7 +40,6 @@ var flightSearchWidgetStyles = `
40
40
  --sw-size-lg: 20px;
41
41
  }
42
42
  .sw-container {
43
- contain: layout;
44
43
  position: relative;
45
44
  display: block;
46
45
  width: 100%;
@@ -145,7 +144,7 @@ var flightSearchWidgetStyles = `
145
144
  position: relative;
146
145
  display: block;
147
146
  padding: 20px;
148
- background-color: var(--sw-white);
147
+ background-color: var(--secondary);
149
148
  border-radius: var(--sw-radius);
150
149
  }
151
150
  .sw-card-box .br-right{
@@ -671,10 +670,10 @@ padding-inline-start: 25px;
671
670
  .p-datepicker-other-month span{
672
671
  opacity: 0;
673
672
  }
674
- .p-datepicker .p-highlight {
673
+ .sw-com-cal .p-datepicker .p-highlight {
675
674
  position: relative;
676
- background: var(--primary-light) !important;
677
- color: var(--sw-white) !important;
675
+ background: var(--primary);
676
+ color: var(--primary-light);
678
677
  }
679
678
  .sw-product-tabs {
680
679
  position: relative;
@@ -736,7 +735,7 @@ padding-inline-start: 25px;
736
735
  gap: 10px;
737
736
  cursor: pointer;
738
737
  user-select: none;
739
- color: var(--sw-body-text);
738
+ color: var(--secondary-bg-text);
740
739
  font-size: 14px;
741
740
  }
742
741
  .sw-material-checkbox input {
@@ -789,10 +788,13 @@ padding-inline-start: 25px;
789
788
  background-color: var(--primary-light);
790
789
  color: var(--primary);
791
790
  }
792
- .sw-tab-content {
791
+ .sw-card-box .sw-srh-class .sw-tab-content {
792
+ border: 1px solid var(--sw-form-border);
793
+ }
794
+ .sw-card-box .sw-tab-content {
793
795
  height: 40px;
794
796
  padding: 6px 15px;
795
- border: 1px solid var(--sw-form-border);
797
+ border: 1px solid var(--secondary-bg-text);
796
798
  border-radius: var(--sw-radius);
797
799
  align-content: center;
798
800
  }
@@ -861,6 +863,13 @@ padding-inline-start: 25px;
861
863
  gap: 8px;
862
864
  height: 40px;
863
865
  }
866
+ .sw-srh-round-text .sw-tab-content{
867
+ color: var(--secondary-bg-text);
868
+ }
869
+ .sw-advanced-search-options .p-accordion-header-text,
870
+ .sw-card-box .p-accordion-toggle-icon{
871
+ color: var(--secondary-bg-text);
872
+ }
864
873
  .sw-remove-segment{
865
874
  fill: var(--primary);
866
875
  cursor: pointer;
@@ -906,14 +915,14 @@ padding-inline-start: 25px;
906
915
  gap: 7px;
907
916
  margin-inline-start: 5px;
908
917
  padding: 8px 10px;
909
- border: 1px solid var(--primary);
918
+ background-color: var(--primary);
910
919
  border-radius: 30px;
911
- background-color: transparent;
912
- color: var(--primary);
920
+ color: var(--sw-white);
913
921
  font-size: 14px;
922
+ cursor: pointer;
914
923
  }
915
924
  .sw-srh-mc .sw-srh-mc-foot button svg {
916
- fill: var(--primary);
925
+ fill: var(--sw-white);
917
926
  }
918
927
  .sw-srh-mc .sw-srh-add-btn {
919
928
  display: flex;
@@ -921,9 +930,9 @@ padding-inline-start: 25px;
921
930
  gap: 7px;
922
931
  margin-inline-start: 5px;
923
932
  padding: 0.8rem 1rem;
933
+ border: 0;
924
934
  border-radius: 30px;
925
935
  color: var(--primary);
926
- font-size: 1.4rem;
927
936
  }
928
937
  .sw-srh-mc .sw-traveller {
929
938
  grid-row-start: 1;
@@ -938,10 +947,11 @@ padding-inline-start: 25px;
938
947
  }
939
948
  .p-autocomplete-multiple-container {
940
949
  width: 100%;
950
+ background-color: var(--sw-white);
941
951
  min-width: 270px;
942
952
  padding: 10px;
943
953
  padding-inline-end: 2rem;
944
- border: 1px solid var(--sw-form-border);
954
+ border: 1px solid var(--secondary-bg-text);
945
955
  border-radius: var(--sw-radius);
946
956
  gap: 0.5rem;
947
957
  font-size: 14px;
@@ -998,7 +1008,7 @@ padding-inline-start: 25px;
998
1008
  font-weight: 400;
999
1009
  }
1000
1010
  .sw-srh-button-wrapper button.sw-active-button {
1001
- background-color: var(--secondary);
1011
+ background-color: var(--primary);
1002
1012
  color: var(--sw-white);
1003
1013
  }
1004
1014
  .sw-traveller .sw-rooms-guests-menu {
@@ -1298,12 +1308,12 @@ padding-inline-start: 25px;
1298
1308
  .sw-srh-mc .sw-srh-mc-foot{
1299
1309
  margin: 10px 0;
1300
1310
  }
1301
- .sw-srh-mc .sw-srh-wrap:nth-child(3){
1302
- flex-direction: row;
1303
- }
1304
1311
  .sw-container .sw-search-button{
1305
1312
  border-radius: var(--sw-btn-radius);
1306
1313
  }
1314
+ .sw-fsrh-chk-main{
1315
+ flex-wrap: wrap;
1316
+ }
1307
1317
  }
1308
1318
  `;
1309
1319
 
@@ -1438,8 +1448,9 @@ function FlightSearchWidget({
1438
1448
  }) {
1439
1449
  const theme = config?.theme;
1440
1450
  const primaryColor = theme?.primary ?? "#2c0a82";
1441
- const secondaryColor = theme?.secondary ?? "#2c0a82";
1442
1451
  const primaryLightColor = theme?.primaryLight ?? "#f3e2ff";
1452
+ const secondaryColor = theme?.secondary ?? "#2c0a82";
1453
+ const secondaryBgText = theme?.secondaryBgText ?? "#ffffff";
1443
1454
  const fontName = config?.fontName;
1444
1455
  const redirectionDomain = config?.redirectionDomain;
1445
1456
  const env = config?.env ?? "dev";
@@ -1690,15 +1701,16 @@ function FlightSearchWidget({
1690
1701
  () => {
1691
1702
  const style = {
1692
1703
  ["--primary"]: primaryColor,
1704
+ ["--primary-light"]: primaryLightColor,
1693
1705
  ["--secondary"]: secondaryColor,
1694
- ["--primary-light"]: primaryLightColor
1706
+ ["--secondary-bg-text"]: secondaryBgText
1695
1707
  };
1696
1708
  if (fontName) {
1697
1709
  style["--font-family"] = fontName;
1698
1710
  }
1699
1711
  return style;
1700
1712
  },
1701
- [primaryColor, secondaryColor, primaryLightColor]
1713
+ [primaryColor, secondaryColor, primaryLightColor, secondaryBgText]
1702
1714
  );
1703
1715
  useEffect(() => {
1704
1716
  ensureStylesInjected();
@@ -2117,8 +2129,8 @@ function FlightSearchWidget({
2117
2129
  isOpen && /* @__PURE__ */ jsxs("div", { className: "sw-dropdown", children: [
2118
2130
  /* @__PURE__ */ jsxs("div", { className: "mobileHead MobileShow", children: [
2119
2131
  /* @__PURE__ */ jsx("a", { type: "button", onClick: () => closeAirportDropdown(dropdownType, segmentIndex), children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2120
- /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
2121
- /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
2132
+ /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", "stroke-linecap": "round", strokeLinejoin: "round" }),
2133
+ /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", "stroke-linecap": "round", strokeLinejoin: "round" })
2122
2134
  ] }) }),
2123
2135
  /* @__PURE__ */ jsx("h4", { children: isOrigin ? "Origin" : "Destination" })
2124
2136
  ] }),
@@ -2285,7 +2297,7 @@ function FlightSearchWidget({
2285
2297
  className: "sw-form-swap",
2286
2298
  "aria-label": "Swap origin and destination",
2287
2299
  onClick: () => swapSegmentLocations(0),
2288
- children: /* @__PURE__ */ jsx("svg", { width: "30px", height: "30px", fill: "var(--body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { "fill-rule": "evenodd", d: "M14.6403 5.2477a.7483.7483 0 0 1 1.0612.0084l4.0871 4.1684a.7555.7555 0 0 1 .1573.8195.7502.7502 0 0 1-.6921.4623H6.8305c-.4145 0-.7504-.3373-.7504-.7533 0-.4161.336-.7534.7504-.7534h10.6317L14.632 6.3131a.7556.7556 0 0 1 .0083-1.0654ZM9.368 18.8148a.7483.7483 0 0 1-1.0611-.0084l-4.087-4.1684a.7555.7555 0 0 1-.1574-.8195.7503.7503 0 0 1 .6921-.4623H17.178c.4144 0 .7503.3373.7503.7533 0 .4161-.3359.7534-.7503.7534H6.5463l2.8301 2.8865a.7555.7555 0 0 1-.0083 1.0654Z", "clip-rule": "evenodd" }) })
2300
+ children: /* @__PURE__ */ jsx("svg", { width: "30px", height: "30px", fill: "var(--body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M14.6403 5.2477a.7483.7483 0 0 1 1.0612.0084l4.0871 4.1684a.7555.7555 0 0 1 .1573.8195.7502.7502 0 0 1-.6921.4623H6.8305c-.4145 0-.7504-.3373-.7504-.7533 0-.4161.336-.7534.7504-.7534h10.6317L14.632 6.3131a.7556.7556 0 0 1 .0083-1.0654ZM9.368 18.8148a.7483.7483 0 0 1-1.0611-.0084l-4.087-4.1684a.7555.7555 0 0 1-.1574-.8195.7503.7503 0 0 1 .6921-.4623H17.178c.4144 0 .7503.3373.7503.7533 0 .4161-.3359.7534-.7503.7534H6.5463l2.8301 2.8865a.7555.7555 0 0 1-.0083 1.0654Z", clipRule: "evenodd" }) })
2289
2301
  }
2290
2302
  ),
2291
2303
  renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))