airport-one-embeddable-widgets 0.34.0 → 0.35.0

package/README.md

@@ -5,7 +5,7 @@ The Flight Search Form Custom Element is a web component that you can use in you
 To include the flight-search-form custom element in your project, add the following script tag to your HTML file:
 
 ```html
-<script src="https://unpkg.com/airport-one-embeddable-widgets@0.24.0/dist/airport-one-embeddable-widgets.iife.js"></script>
+<script src="https://unpkg.com/airport-one-embeddable-widgets@latest/dist/airport-one-embeddable-widgets.iife.js"></script>
 ```
 
 ## Usage
@@ -42,3 +42,147 @@ For example, to set the origin and destination airports, you can use the followi
 <flight-search-form origin="JFK" destination="LAX"></flight-search-form>
 ```
 
+# Styling
+
+## 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) {
+  background-color: #f9f9f9;
+  border-radius: 5px;
+}
+
+/* Styling the form inside the widget */
+flight-search-form::part(flight-search-widget-form) {
+  padding: 20px;
+}
+
+/* Enhancing the autocomplete container */
+flight-search-form::part(flight-search-widget-autocomplete-container) {
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+
+/* Customizing the autocomplete wrapper */
+flight-search-form::part(flight-search-widget-autocomplete-wrapper) {
+  padding: 10px;
+}
+
+/* Changing the autocomplete icon's appearance */
+flight-search-form::part(flight-search-widget-autocomplete-icon) {
+  fill: #888;
+}
+
+/* Modifying the appearance and behavior of the autocomplete input field */
+flight-search-form::part(flight-search-widget-autocomplete-input) {
+  border: none;
+  outline: none;
+}
+
+/* Styling the switch button */
+flight-search-form::part(flight-search-widget-switch) {
+  background-color: #007BFF;
+  color: #fff;
+}
+
+/* Customizing the switch button SVG graphic */
+flight-search-form::part(flight-search-widget-switch-svg) {
+  fill: #fff;
+}
+
+/* Customizing the date range container */
+flight-search-form::part(flight-search-widget-date-range-container) {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* Changing the appearance of the date selection icons */
+flight-search-form::part(flight-search-widget-date-range-icon) {
+  fill: #888;
+}
+
+/* Modifying the appearance of the departure date input field */
+flight-search-form::part(flight-search-widget-date-range-start-date-input) {
+  border: none;
+  outline: none;
+}
+
+/* Styling the vertical line separator */
+flight-search-form::part(flight-search-widget-date-range-vertical-line-separator) {
+  border-left: 1px solid #ddd;
+}
+
+/* Modifying the appearance of the return date input field */
+flight-search-form::part(flight-search-widget-date-range-end-date-input) {
+  border: none;
+  outline: none;
+}
+
+/* Customizing the search button container */
+flight-search-form::part(flight-search-widget-search-button-container) {
+  text-align: right;
+}
+
+/* Styling the search button */
+flight-search-form::part(flight-search-widget-search-button) {
+  background-color: #007BFF;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 5px;
+}
+
+/* Customizing the search button SVG graphic */
+flight-search-form::part(flight-search-widget-search-button-svg) {
+  fill: #fff;
+}
+```