@travelswitchhq/flight-search-react 1.0.8 → 1.1.0

package/dist/index.cjs

@@ -66,7 +66,6 @@ var flightSearchWidgetStyles = `
   --sw-size-lg: 20px;
 }
 .sw-container {
-  contain: layout;
   position: relative;
   display: block;
   width: 100%;
@@ -171,7 +170,7 @@ var flightSearchWidgetStyles = `
   position: relative;
   display: block;
   padding: 20px;
-  background-color: var(--sw-white);
+  background-color: var(--secondary);
   border-radius: var(--sw-radius);
 }
 .sw-card-box .br-right{
@@ -697,10 +696,10 @@ padding-inline-start: 25px;
 .p-datepicker-other-month span{
   opacity: 0;
 }
-.p-datepicker .p-highlight {
+.sw-com-cal .p-datepicker .p-highlight {
   position: relative;
-  background: var(--primary-light) !important;
-  color: var(--sw-white) !important;
+  background: var(--primary);
+  color: var(--primary-light);
 }
 .sw-product-tabs {
   position: relative;
@@ -762,7 +761,7 @@ padding-inline-start: 25px;
   gap: 10px;
   cursor: pointer;
   user-select: none;
-  color: var(--sw-body-text);
+  color: var(--secondary-bg-text);
   font-size: 14px;
 }
 .sw-material-checkbox input {
@@ -815,10 +814,13 @@ padding-inline-start: 25px;
   background-color: var(--primary-light);
   color: var(--primary);
 }
-.sw-tab-content {
+.sw-card-box .sw-srh-class .sw-tab-content {
+  border: 1px solid var(--sw-form-border);
+}
+.sw-card-box .sw-tab-content {
   height: 40px;
   padding: 6px 15px;
-  border: 1px solid var(--sw-form-border);
+  border: 1px solid var(--secondary-bg-text);
   border-radius: var(--sw-radius);
   align-content: center;
 }
@@ -887,6 +889,13 @@ padding-inline-start: 25px;
   gap: 8px;
   height: 40px;
 }
+.sw-srh-round-text .sw-tab-content{
+  color: var(--secondary-bg-text);
+}
+.sw-advanced-search-options .p-accordion-header-text,
+.sw-card-box .p-accordion-toggle-icon{
+  color: var(--secondary-bg-text);
+}
 .sw-remove-segment{
   fill: var(--primary);
   cursor: pointer;
@@ -932,14 +941,14 @@ padding-inline-start: 25px;
   gap: 7px;
   margin-inline-start: 5px;
   padding: 8px 10px;
-  border: 1px solid var(--primary);
+  background-color: var(--primary);
   border-radius: 30px;
-  background-color: transparent;
-  color: var(--primary);
+  color: var(--sw-white);
   font-size: 14px;
+  cursor: pointer;
 }
 .sw-srh-mc .sw-srh-mc-foot button svg {
-  fill: var(--primary);
+  fill: var(--sw-white);
 }
 .sw-srh-mc .sw-srh-add-btn {
   display: flex;
@@ -947,9 +956,9 @@ padding-inline-start: 25px;
   gap: 7px;
   margin-inline-start: 5px;
   padding: 0.8rem 1rem;
+  border: 0;
   border-radius: 30px;
   color: var(--primary);
-  font-size: 1.4rem;
 }
 .sw-srh-mc .sw-traveller {
     grid-row-start: 1;
@@ -964,10 +973,11 @@ padding-inline-start: 25px;
 }
 .p-autocomplete-multiple-container {
   width: 100%;
+  background-color: var(--sw-white);
   min-width: 270px;
   padding: 10px;
   padding-inline-end: 2rem;
-  border: 1px solid var(--sw-form-border);
+  border: 1px solid var(--secondary-bg-text);
   border-radius: var(--sw-radius);
   gap: 0.5rem;
   font-size: 14px;
@@ -1024,7 +1034,7 @@ padding-inline-start: 25px;
   font-weight: 400;
 }
 .sw-srh-button-wrapper button.sw-active-button {
-  background-color: var(--secondary);
+  background-color: var(--primary);
   color: var(--sw-white);
 }
 .sw-traveller .sw-rooms-guests-menu {
@@ -1324,12 +1334,12 @@ padding-inline-start: 25px;
     .sw-srh-mc .sw-srh-mc-foot{
         margin: 10px 0;
     }
-    .sw-srh-mc .sw-srh-wrap:nth-child(3){
-        flex-direction: row;
-    }
     .sw-container .sw-search-button{
         border-radius: var(--sw-btn-radius);
     }
+    .sw-fsrh-chk-main{
+        flex-wrap: wrap;
+    }
 }
 `;
 
@@ -1464,8 +1474,9 @@ function FlightSearchWidget({
 }) {
   const theme = config?.theme;
   const primaryColor = theme?.primary ?? "#2c0a82";
-  const secondaryColor = theme?.secondary ?? "#2c0a82";
   const primaryLightColor = theme?.primaryLight ?? "#f3e2ff";
+  const secondaryColor = theme?.secondary ?? "#2c0a82";
+  const secondaryBgText = theme?.secondaryBgText ?? "#ffffff";
   const fontName = config?.fontName;
   const redirectionDomain = config?.redirectionDomain;
   const env = config?.env ?? "dev";
@@ -1716,15 +1727,16 @@ function FlightSearchWidget({
     () => {
       const style = {
         ["--primary"]: primaryColor,
+        ["--primary-light"]: primaryLightColor,
         ["--secondary"]: secondaryColor,
-        ["--primary-light"]: primaryLightColor
+        ["--secondary-bg-text"]: secondaryBgText
       };
       if (fontName) {
         style["--font-family"] = fontName;
       }
       return style;
     },
-    [primaryColor, secondaryColor, primaryLightColor]
+    [primaryColor, secondaryColor, primaryLightColor, secondaryBgText]
   );
   (0, import_react.useEffect)(() => {
     ensureStylesInjected();
@@ -2143,8 +2155,8 @@ function FlightSearchWidget({
         isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-dropdown", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mobileHead MobileShow", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { type: "button", onClick: () => closeAirportDropdown(dropdownType, segmentIndex), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", "stroke-linecap": "round", strokeLinejoin: "round" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", "stroke-linecap": "round", strokeLinejoin: "round" })
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: isOrigin ? "Origin" : "Destination" })
           ] }),
@@ -2311,7 +2323,7 @@ function FlightSearchWidget({
             className: "sw-form-swap",
             "aria-label": "Swap origin and destination",
             onClick: () => swapSegmentLocations(0),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "30px", height: "30px", fill: "var(--body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "30px", height: "30px", fill: "var(--body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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" }) })
           }
         ),
         renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))