airport-one-embeddable-widgets 2.5.2 → 2.5.3

package/README.md

@@ -1,7 +1,9 @@
 # Flight Search Form Custom Element
+
 The Flight Search Form Custom Element is a web component that you can use in your website to display a flight search form. You can use it as a standard HTML element, and you don't need to have a React application to use it.
 
 ## Installation
+
 To include the flight-search-form custom element in your project, add the following script tag to your HTML file:
 
 ```html
@@ -9,6 +11,7 @@ To include the flight-search-form custom element in your project, add the follow
 ```
 
 ## Usage
+
 To use the flight-search-form custom element, simply add the following HTML tag to your markup:
 
 ```html
@@ -17,22 +20,22 @@ To use the flight-search-form custom element, simply add the following HTML tag
 
 You can customize the behavior and appearance of the element by setting its attributes. The available attributes are listed in the table below:
 
-Attribute | Type | Default | Description
---- | --- | --- | ---
-origin | string | null | The origin airport code
-destination | string | null | The destination airport code
-airlines | string | null | A comma-separated list of airline codes
-providers | string | null | A comma-separated list of provider codes
-destinations | string | null | A comma-separated list of destination codes
-primaryColor | string | null | The primary color of the form
-secondaryColor | string | null | The secondary color of the form
-locationId | string | null | The location identifier
-experimentId | string | null | The experiment identifier
-clickId | string | null | The click identifier
-arrivalAirportLabel | string | null | The label for the arrival airport input
-departureAirportLabel | string | null | The label for the departure airport input
-departureDateLabel | string | null | The label for the departure date input
-returnDateLabel | string | null | The label for the return date input
+| Attribute             | Type   | Default | Description                                 |
+| --------------------- | ------ | ------- | ------------------------------------------- |
+| origin                | string | null    | The origin airport code                     |
+| destination           | string | null    | The destination airport code                |
+| airlines              | string | null    | A comma-separated list of airline codes     |
+| providers             | string | null    | A comma-separated list of provider codes    |
+| destinations          | string | null    | A comma-separated list of destination codes |
+| primaryColor          | string | null    | The primary color of the form               |
+| secondaryColor        | string | null    | The secondary color of the form             |
+| locationId            | string | null    | The location identifier                     |
+| experimentId          | string | null    | The experiment identifier                   |
+| clickId               | string | null    | The click identifier                        |
+| arrivalAirportLabel   | string | null    | The label for the arrival airport input     |
+| departureAirportLabel | string | null    | The label for the departure airport input   |
+| departureDateLabel    | string | null    | The label for the departure date input      |
+| returnDateLabel       | string | null    | The label for the return date input         |
 
 ## Examples
 
@@ -47,54 +50,71 @@ For example, to set the origin and destination airports, you can use the followi
 ## Flight Search Widget: Element Descriptions
 
 ### 1. `flight-search-widget-container`
+
 The main container wrapping the entire flight search widget. Target this to style the overall appearance.
 
 ### 2. `flight-search-widget-form`
+
 The form inside the widget that contains the search inputs and buttons. Customize this to modify the form layout and styling.
 
 ### 3. `flight-search-widget-autocomplete-container`
+
 Holds the autocomplete functionality for the departure and arrival airports. Style this container to enhance the autocomplete feature.
 
 ### 4. `flight-search-widget-autocomplete-wrapper`
+
 Wraps each autocomplete input. Target this to customize the wrapper around the autocomplete input fields.
 
 ### 5. `flight-search-widget-autocomplete-icon`
+
 The icon associated with the autocomplete input field. Style this to change the icon's appearance.
 
 ### 6. `flight-search-widget-autocomplete-input`
+
 The input field for the autocomplete feature. Modify its appearance and behavior as needed.
 
 ### 7. `flight-search-widget-switch`
+
 The switch button that allows users to swap departure and arrival airports. Style this to improve visual appeal and click-feedback.
 
 ### 8. `flight-search-widget-switch-svg`
+
 The SVG graphic within the switch button. Customize this for the desired visual effect.
 
 ### 9. `flight-search-widget-date-range-container`
+
 Holds the date range inputs for selecting departure and return dates. Customize this for layout and styling of the date inputs.
 
 ### 10. `flight-search-widget-date-range-icon`
+
 The icon within the date range inputs. Style this to change the appearance of the date selection icons.
 
 ### 11. `flight-search-widget-date-range-start-date-input`
+
 The input field for selecting the departure date. Modify its appearance and behavior as needed.
 
 ### 12. `flight-search-widget-date-range-vertical-line-separator`
+
 The vertical line separator between the departure and return date inputs. Style this to create a distinct separator effect.
 
 ### 13. `flight-search-widget-date-range-end-date-input`
+
 The input field for selecting the return date. Modify its appearance and behavior as needed.
 
 ### 14. `flight-search-widget-search-button-container`
+
 The container that holds the search button. Customize this to adjust the button's position within the widget.
 
 ### 15. `flight-search-widget-search-button`
+
 The search button that submits the flight search. Style this for visual appeal and interactive feedback.
 
 ### 16. `flight-search-widget-search-button-svg`
+
 The SVG graphic within the search button. Customize this for the desired visual effect.
 
 ### Example usage
+
 ```css
 /* Targeting the main container */
 flight-search-form::part(flight-search-widget-container) {
@@ -131,7 +151,7 @@ flight-search-form::part(flight-search-widget-autocomplete-input) {
 
 /* Styling the switch button */
 flight-search-form::part(flight-search-widget-switch) {
-  background-color: #007BFF;
+  background-color: #007bff;
   color: #fff;
 }
 
@@ -158,7 +178,9 @@ flight-search-form::part(flight-search-widget-date-range-start-date-input) {
 }
 
 /* Styling the vertical line separator */
-flight-search-form::part(flight-search-widget-date-range-vertical-line-separator) {
+flight-search-form::part(
+    flight-search-widget-date-range-vertical-line-separator
+  ) {
   border-left: 1px solid #ddd;
 }
 
@@ -175,7 +197,7 @@ flight-search-form::part(flight-search-widget-search-button-container) {
 
 /* Styling the search button */
 flight-search-form::part(flight-search-widget-search-button) {
-  background-color: #007BFF;
+  background-color: #007bff;
   color: #fff;
   padding: 10px 20px;
   border-radius: 5px;