airport-one-embeddable-widgets 2.29.10 → 2.29.11
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/README.md +36 -23
- package/dist/airport-one-embeddable-widgets.iife.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
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.
|
|
4
4
|
|
|
5
|
+
## Version contract note (v1 vs v2)
|
|
6
|
+
|
|
7
|
+
This package documents the **v1** embed contract and remains unchanged for existing customers:
|
|
8
|
+
|
|
9
|
+
- Tag: `flight-search-form`
|
|
10
|
+
- Script: `https://unpkg.com/airport-one-embeddable-widgets@latest/dist/airport-one-embeddable-widgets.iife.js`
|
|
11
|
+
|
|
12
|
+
The v2 contract is an explicit opt-in and does not alias from the v1 tag:
|
|
13
|
+
|
|
14
|
+
- Tag: `fma-airfare-search`
|
|
15
|
+
- Script host: `https://widgets.flymyairport.com`
|
|
16
|
+
- Required attribute(s): `data-widget-instance-id`
|
|
17
|
+
|
|
5
18
|
## Installation
|
|
6
19
|
|
|
7
20
|
To include the flight-search-form custom element in your project, add the following script tag to your HTML file:
|
|
@@ -20,27 +33,27 @@ To use the flight-search-form custom element, simply add the following HTML tag
|
|
|
20
33
|
|
|
21
34
|
You can customize the behavior and appearance of the element by setting its attributes. Attributes on the custom element are lowercase and map to camelCase React props. Hyphenated attribute names (e.g., `primary-color`) are not supported—use the all-lowercase, non-hyphen form (e.g., `primarycolor`). The table below shows both forms:
|
|
22
35
|
|
|
23
|
-
| React prop
|
|
24
|
-
|
|
|
25
|
-
| subscribingAirport
|
|
26
|
-
| origin
|
|
27
|
-
| destination
|
|
28
|
-
| airlines
|
|
29
|
-
| providers
|
|
30
|
-
| destinations
|
|
31
|
-
| primaryColor
|
|
32
|
-
| secondaryColor
|
|
33
|
-
| locationId
|
|
34
|
-
| experimentId
|
|
35
|
-
| clickId
|
|
36
|
-
| arrivalAirportLabel
|
|
37
|
-
| departureAirportLabel
|
|
38
|
-
| departureDateLabel
|
|
39
|
-
| returnDateLabel
|
|
40
|
-
| consentAdvertising
|
|
41
|
-
| consentAnalytics
|
|
42
|
-
| hideCarButton
|
|
43
|
-
| —
|
|
36
|
+
| React prop | Custom element attribute | Type (attribute) | Default | Description |
|
|
37
|
+
| --------------------- | ------------------------ | -------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
38
|
+
| subscribingAirport | subscribingairport | string | (unset) | The subscribing airport code |
|
|
39
|
+
| origin | origin | string | (unset) | The origin airport code |
|
|
40
|
+
| destination | destination | string | (unset) | The destination airport code |
|
|
41
|
+
| airlines | airlines | string | (unset) | A comma-separated list of airline codes |
|
|
42
|
+
| providers | providers | string | (unset) | A comma-separated list of provider codes |
|
|
43
|
+
| destinations | destinations | string | (unset) | A comma-separated list of destination codes |
|
|
44
|
+
| primaryColor | primarycolor | string | (unset) | The primary color of the form |
|
|
45
|
+
| secondaryColor | secondarycolor | string | (unset) | The secondary color of the form |
|
|
46
|
+
| locationId | locationid | string | (unset) | The location identifier |
|
|
47
|
+
| experimentId | experimentid | string | (unset) | The experiment identifier |
|
|
48
|
+
| clickId | clickid | string | (unset) | The click identifier |
|
|
49
|
+
| arrivalAirportLabel | arrivalairportlabel | string | (unset) | The label for the arrival airport input |
|
|
50
|
+
| departureAirportLabel | departureairportlabel | string | (unset) | The label for the departure airport input |
|
|
51
|
+
| departureDateLabel | departuredatelabel | string | (unset) | The label for the departure date input |
|
|
52
|
+
| returnDateLabel | returndatelabel | string | (unset) | The label for the return date input |
|
|
53
|
+
| consentAdvertising | consentadvertising | string ("true" or "false") | "true" | Dynamically turn off/on Advertising consent |
|
|
54
|
+
| consentAnalytics | consentanalytics | string ("true" or "false") | "true" | Dynamically turn off/on Analytics consent |
|
|
55
|
+
| hideCarButton | hidecarbutton | string ("true" or "false") | "false" | When "true", hides the Cars tab/button. Flights is unaffected (backward compatible). |
|
|
56
|
+
| — | borderradius | string (CSS length) | 0.5rem | Override the widget border radius used by `rounded-lg` (and related). Accepts values like `0`, `8px`, `0.5rem`. Bare numbers are treated as `px`. Default is `0.5rem` (8px). |
|
|
44
57
|
|
|
45
58
|
> Note: Types in this table describe custom element attribute values. In React, `hideCarButton`, `consentAdvertising`, and `consentAnalytics` are boolean props; pass `true`/`false` directly.
|
|
46
59
|
|
|
@@ -257,8 +270,8 @@ flight-search-form::part(flight-search-widget-date-range-start-date-input) {
|
|
|
257
270
|
|
|
258
271
|
/* Styling the vertical line separator */
|
|
259
272
|
flight-search-form::part(
|
|
260
|
-
|
|
261
|
-
|
|
273
|
+
flight-search-widget-date-range-vertical-line-separator
|
|
274
|
+
) {
|
|
262
275
|
border-left: 1px solid #ddd;
|
|
263
276
|
}
|
|
264
277
|
|