airport-one-embeddable-widgets 2.28.3 → 2.28.4
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 +22 -0
- package/dist/airport-one-embeddable-widgets.iife.js +33 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,6 +40,7 @@ You can customize the behavior and appearance of the element by setting its attr
|
|
|
40
40
|
| consentAdvertising | consentadvertising | string ("true" or "false") | "true" | Dynamically turn off/on Advertising consent |
|
|
41
41
|
| consentAnalytics | consentanalytics | string ("true" or "false") | "true" | Dynamically turn off/on Analytics consent |
|
|
42
42
|
| hideCarButton | hidecarbutton | string ("true" or "false") | "false"| When "true", hides the Cars tab/button. Flights is unaffected (backward compatible). |
|
|
43
|
+
| — | borderradius | string (CSS length) | 0.5rem | Override the widget border radius used by `a1-rounded-lg` (and related). Accepts values like `0`, `8px`, `0.5rem`. Bare numbers are treated as `px`. Default is `0.5rem` (8px). |
|
|
43
44
|
|
|
44
45
|
> Note: Types in this table describe custom element attribute values. In React, `hideCarButton`, `consentAdvertising`, and `consentAnalytics` are boolean props; pass `true`/`false` directly.
|
|
45
46
|
|
|
@@ -65,6 +66,27 @@ You can customize the behavior and appearance of the element by setting its attr
|
|
|
65
66
|
|
|
66
67
|
> Parsing rules: Accepted values are the strings `"true"` or `"false"` (case-insensitive). Leading/trailing whitespace is ignored. Any other value falls back to the documented default for that attribute. In React, pass actual booleans (`true`/`false`).
|
|
67
68
|
|
|
69
|
+
### Border radius override (`borderradius`)
|
|
70
|
+
|
|
71
|
+
The embeddable widget uses Tailwind utilities like `a1-rounded-lg`, which resolve to a CSS custom property: `--radius`. You can set the border radius for these elements without writing custom CSS by adding the `borderradius` attribute:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<!-- Square corners -->
|
|
75
|
+
<flight-search-form borderradius="0"></flight-search-form>
|
|
76
|
+
|
|
77
|
+
<!-- 4px corners -->
|
|
78
|
+
<flight-search-form borderradius="4px"></flight-search-form>
|
|
79
|
+
|
|
80
|
+
<!-- 10px corners using rems also works -->
|
|
81
|
+
<flight-search-form borderradius="0.625rem"></flight-search-form>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Notes:
|
|
85
|
+
|
|
86
|
+
- Default (when unset) is `0.5rem` (8px), preserving current behavior.
|
|
87
|
+
- Bare numbers are interpreted as pixels (e.g., `8` → `8px`). The literal `0` is supported.
|
|
88
|
+
- This controls the corners for elements styled with `a1-rounded-lg` (and related sizes that derive from `--radius`). Other sizes like `a1-rounded-xl` are unaffected.
|
|
89
|
+
|
|
68
90
|
## Examples
|
|
69
91
|
|
|
70
92
|
For example, to set the origin and destination airports, you can use the following markup:
|