@aurodesignsystem-dev/auro-flight 0.0.0-pr166.1 → 0.0.0-pr168.0
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 +77 -70
- package/demo/api.md +372 -198
- package/demo/auro-flight.min.js +128 -41
- package/demo/index.md +23 -511
- package/dist/{auro-flight-hKw-4WrK.js → auro-flight-DI2Zb2qR.js} +8 -8
- package/dist/index.d.ts +218 -132
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +15 -9
package/demo/index.md
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
|
|
1
|
+
<!--
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
# Flight
|
|
3
8
|
|
|
4
|
-
# Flight
|
|
5
|
-
|
|
6
9
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
7
10
|
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
8
11
|
The `<auro-flight>` element encapsulates Alaska's flight result logic. A departure station and an arrival station are displayed in tandem with all sectors of the flight in an [auro-flightline](https://auro.alaskaair.com/components/auro/flightline) element.
|
|
9
12
|
|
|
10
|
-
## Attributes
|
|
11
|
-
|
|
12
|
-
The `<auro-flight>` custom element's API consists of a series of attributes to be defined at the time of use. Be sure to review the [api documentation](https://auro.alaskaair.com/components/auro/flight/api) for this element.
|
|
13
|
-
|
|
14
13
|
## Dependencies
|
|
15
14
|
|
|
16
15
|
The `<auro-flight>` element has dependencies on the following additional Auro custom elements.
|
|
@@ -21,17 +20,28 @@ The `<auro-flight>` element has dependencies on the following additional Auro cu
|
|
|
21
20
|
|
|
22
21
|
└── @aurodesignsystem/auro-flight
|
|
23
22
|
| ├── (internal dependency) @aurodesignsystem/auro-flight-header
|
|
24
|
-
| ├── (internal dependency) @aurodesignsystem/auro-flight-
|
|
23
|
+
| ├── (internal dependency) @aurodesignsystem/auro-flight-main
|
|
25
24
|
| └── (external dependency) @aurodesignsystem/auro-datetime
|
|
26
25
|
```
|
|
27
26
|
|
|
28
27
|
See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `<auro-flight-segment>` API.
|
|
29
28
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
29
|
|
|
31
|
-
##
|
|
30
|
+
## Use Cases
|
|
31
|
+
|
|
32
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
33
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
34
|
+
The `<auro-flight>` element should be used in situations where users may:
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
* list all the available data for a flight
|
|
37
|
+
* list all stopovers or layovers for a flight
|
|
38
|
+
* list connecting flights or other important information
|
|
39
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
40
|
+
|
|
41
|
+
## Example(s)
|
|
34
42
|
|
|
43
|
+
### Basic
|
|
44
|
+
|
|
35
45
|
<div class="exampleWrapper">
|
|
36
46
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
37
47
|
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
@@ -63,503 +73,5 @@ This example illustrates a mainline nonstop flight from SEA to LAX
|
|
|
63
73
|
</auro-flight>
|
|
64
74
|
```
|
|
65
75
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
66
|
-
</auro-accordion>
|
|
67
|
-
|
|
68
|
-
## Mainline next day arrival/departure
|
|
69
|
-
|
|
70
|
-
This example illustrates a mainline nonstop with a next day arrival or departure from KOA to SEA
|
|
71
|
-
|
|
72
|
-
<div class="exampleWrapper">
|
|
73
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nextDay.html) -->
|
|
74
|
-
<!-- The below content is automatically added from ./../apiExamples/nextDay.html -->
|
|
75
|
-
<auro-flight
|
|
76
|
-
flights='["AS 880"]'
|
|
77
|
-
duration="350"
|
|
78
|
-
departureTime="2022-05-31T21:55:00-10:00"
|
|
79
|
-
departureStation="KOA"
|
|
80
|
-
arrivalTime="2022-06-01T06:45:00-07:00"
|
|
81
|
-
arrivalStation="SEA">
|
|
82
|
-
<auro-flightline></auro-flightline>
|
|
83
|
-
</auro-flight>
|
|
84
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
85
|
-
</div>
|
|
86
|
-
<auro-accordion alignRight>
|
|
87
|
-
<span slot="trigger">See code</span>
|
|
88
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nextDay.html) -->
|
|
89
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/nextDay.html -->
|
|
90
|
-
|
|
91
|
-
```html
|
|
92
|
-
<auro-flight
|
|
93
|
-
flights='["AS 880"]'
|
|
94
|
-
duration="350"
|
|
95
|
-
departureTime="2022-05-31T21:55:00-10:00"
|
|
96
|
-
departureStation="KOA"
|
|
97
|
-
arrivalTime="2022-06-01T06:45:00-07:00"
|
|
98
|
-
arrivalStation="SEA">
|
|
99
|
-
<auro-flightline></auro-flightline>
|
|
100
|
-
</auro-flight>
|
|
101
|
-
```
|
|
102
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
103
|
-
</auro-accordion>
|
|
104
|
-
|
|
105
|
-
## Mainline -1 day arrival/departure
|
|
106
|
-
|
|
107
|
-
This example illustrates a mainline nonstop with a -1 day arrival or departure from KOA to SEA
|
|
108
|
-
|
|
109
|
-
<div class="exampleWrapper">
|
|
110
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/arriveOneDayBefore.html) -->
|
|
111
|
-
<!-- The below content is automatically added from ./../apiExamples/arriveOneDayBefore.html -->
|
|
112
|
-
<auro-flight
|
|
113
|
-
flights='["AS 880"]'
|
|
114
|
-
duration="350"
|
|
115
|
-
departureTime="2022-05-31T22:55:00-10:00"
|
|
116
|
-
departureStation="KOA"
|
|
117
|
-
arrivalTime="2022-05-30T07:45:00-07:00"
|
|
118
|
-
arrivalStation="SEA">
|
|
119
|
-
<auro-flightline></auro-flightline>
|
|
120
|
-
</auro-flight>
|
|
121
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
-
</div>
|
|
123
|
-
<auro-accordion alignRight>
|
|
124
|
-
<span slot="trigger">See code</span>
|
|
125
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/arriveOneDayBefore.html) -->
|
|
126
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/arriveOneDayBefore.html -->
|
|
127
|
-
|
|
128
|
-
```html
|
|
129
|
-
<auro-flight
|
|
130
|
-
flights='["AS 880"]'
|
|
131
|
-
duration="350"
|
|
132
|
-
departureTime="2022-05-31T22:55:00-10:00"
|
|
133
|
-
departureStation="KOA"
|
|
134
|
-
arrivalTime="2022-05-30T07:45:00-07:00"
|
|
135
|
-
arrivalStation="SEA">
|
|
136
|
-
<auro-flightline></auro-flightline>
|
|
137
|
-
</auro-flight>
|
|
138
|
-
```
|
|
139
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
140
|
-
</auro-accordion>
|
|
141
|
-
|
|
142
|
-
## Mainline one-stop
|
|
143
|
-
|
|
144
|
-
This example illustrates a one-stop `stopover` flight from ANC to ADK. Notice the additional information required for the `auro-flight-segment` element.
|
|
145
|
-
|
|
146
|
-
<div class="exampleWrapper">
|
|
147
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/oneStop.html) -->
|
|
148
|
-
<!-- The below content is automatically added from ./../apiExamples/oneStop.html -->
|
|
149
|
-
<auro-flight
|
|
150
|
-
flights='["AS 374"]'
|
|
151
|
-
duration="120"
|
|
152
|
-
departureTime="2022-05-04T01:55:00-09:00"
|
|
153
|
-
departureStation="ANC"
|
|
154
|
-
arrivalTime="2022-05-04T03:55:00-09:00"
|
|
155
|
-
arrivalStation="ADK"
|
|
156
|
-
stops='[{ "isStopover": true, "arrivalStation": "CDB"}]'>
|
|
157
|
-
<auro-flightline>
|
|
158
|
-
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
159
|
-
</auro-flightline>
|
|
160
|
-
</auro-flight>
|
|
161
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
162
|
-
</div>
|
|
163
|
-
<auro-accordion alignRight>
|
|
164
|
-
<span slot="trigger">See code</span>
|
|
165
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/oneStop.html) -->
|
|
166
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/oneStop.html -->
|
|
167
|
-
|
|
168
|
-
```html
|
|
169
|
-
<auro-flight
|
|
170
|
-
flights='["AS 374"]'
|
|
171
|
-
duration="120"
|
|
172
|
-
departureTime="2022-05-04T01:55:00-09:00"
|
|
173
|
-
departureStation="ANC"
|
|
174
|
-
arrivalTime="2022-05-04T03:55:00-09:00"
|
|
175
|
-
arrivalStation="ADK"
|
|
176
|
-
stops='[{ "isStopover": true, "arrivalStation": "CDB"}]'>
|
|
177
|
-
<auro-flightline>
|
|
178
|
-
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
179
|
-
</auro-flightline>
|
|
180
|
-
</auro-flight>
|
|
181
|
-
```
|
|
182
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
183
|
-
</auro-accordion>
|
|
184
|
-
|
|
185
|
-
## Mainline multi-stop
|
|
186
|
-
|
|
187
|
-
The following example illustrates a mainline multi-stop `stopover` flight from KTN to ANC.
|
|
188
|
-
|
|
189
|
-
<div class="exampleWrapper">
|
|
190
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiStop.html) -->
|
|
191
|
-
<!-- The below content is automatically added from ./../apiExamples/multiStop.html -->
|
|
192
|
-
<auro-flight
|
|
193
|
-
flights='["AS 65"]'
|
|
194
|
-
duration="353"
|
|
195
|
-
departureTime="2022-05-04T00:00:00-09:00"
|
|
196
|
-
departureStation="KTN"
|
|
197
|
-
arrivalTime="2022-05-04T05:53:00-09:00"
|
|
198
|
-
arrivalStation="ANC"
|
|
199
|
-
stops='[{ "isStopover": true, "arrivalStation": "WRG"},
|
|
200
|
-
{ "isStopover": true, "arrivalStation": "PSG"},
|
|
201
|
-
{ "isStopover": true, "arrivalStation": "JNU"}]'>
|
|
202
|
-
<auro-flightline>
|
|
203
|
-
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
204
|
-
<auro-flight-segment stopover iata="PSG"></auro-flight-segment>
|
|
205
|
-
<auro-flight-segment stopover iata="JNU"></auro-flight-segment>
|
|
206
|
-
</auro-flightline>
|
|
207
|
-
</auro-flight>
|
|
208
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
209
|
-
</div>
|
|
210
|
-
<auro-accordion alignRight>
|
|
211
|
-
<span slot="trigger">See code</span>
|
|
212
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiStop.html) -->
|
|
213
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/multiStop.html -->
|
|
214
|
-
|
|
215
|
-
```html
|
|
216
|
-
<auro-flight
|
|
217
|
-
flights='["AS 65"]'
|
|
218
|
-
duration="353"
|
|
219
|
-
departureTime="2022-05-04T00:00:00-09:00"
|
|
220
|
-
departureStation="KTN"
|
|
221
|
-
arrivalTime="2022-05-04T05:53:00-09:00"
|
|
222
|
-
arrivalStation="ANC"
|
|
223
|
-
stops='[{ "isStopover": true, "arrivalStation": "WRG"},
|
|
224
|
-
{ "isStopover": true, "arrivalStation": "PSG"},
|
|
225
|
-
{ "isStopover": true, "arrivalStation": "JNU"}]'>
|
|
226
|
-
<auro-flightline>
|
|
227
|
-
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
228
|
-
<auro-flight-segment stopover iata="PSG"></auro-flight-segment>
|
|
229
|
-
<auro-flight-segment stopover iata="JNU"></auro-flight-segment>
|
|
230
|
-
</auro-flightline>
|
|
231
|
-
</auro-flight>
|
|
232
|
-
```
|
|
233
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
234
|
-
</auro-accordion>
|
|
235
|
-
|
|
236
|
-
## Mainline + mainline connection w/layover
|
|
237
|
-
|
|
238
|
-
The following example illustrates a change of gauge flight with a layover in SEA for 1h 35m.
|
|
239
|
-
|
|
240
|
-
<div class="exampleWrapper">
|
|
241
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/connection.html) -->
|
|
242
|
-
<!-- The below content is automatically added from ./../apiExamples/connection.html -->
|
|
243
|
-
<auro-flight
|
|
244
|
-
flights='["AS 161", "AA 2269"]'
|
|
245
|
-
duration="704"
|
|
246
|
-
departureTime="2022-07-21T00:55:00-09:00"
|
|
247
|
-
departureStation="ANC"
|
|
248
|
-
arrivalTime="2022-07-21T16:39:00-04:00"
|
|
249
|
-
arrivalStation="BOS"
|
|
250
|
-
stops='[{ "isStopover": false, "arrivalStation": "ORD", "duration":"3h 10m" }]'>
|
|
251
|
-
<auro-flightline>
|
|
252
|
-
<auro-flight-segment iata="ORD" duration="3h 10m"></auro-flight-segment>
|
|
253
|
-
</auro-flightline>
|
|
254
|
-
<span slot="footer">
|
|
255
|
-
<auro-icon category="logos" name="tail-AS" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
256
|
-
AS161 is subject to government approval <br aria-hidden="true"/>
|
|
257
|
-
<auro-icon category="logos" name="tail-AA" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
258
|
-
AA2269 is operated by American Airlines
|
|
259
|
-
</span>
|
|
260
|
-
</auro-flight>
|
|
261
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
262
|
-
</div>
|
|
263
|
-
<auro-accordion alignRight>
|
|
264
|
-
<span slot="trigger">See code</span>
|
|
265
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/connection.html) -->
|
|
266
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/connection.html -->
|
|
267
|
-
|
|
268
|
-
```html
|
|
269
|
-
<auro-flight
|
|
270
|
-
flights='["AS 161", "AA 2269"]'
|
|
271
|
-
duration="704"
|
|
272
|
-
departureTime="2022-07-21T00:55:00-09:00"
|
|
273
|
-
departureStation="ANC"
|
|
274
|
-
arrivalTime="2022-07-21T16:39:00-04:00"
|
|
275
|
-
arrivalStation="BOS"
|
|
276
|
-
stops='[{ "isStopover": false, "arrivalStation": "ORD", "duration":"3h 10m" }]'>
|
|
277
|
-
<auro-flightline>
|
|
278
|
-
<auro-flight-segment iata="ORD" duration="3h 10m"></auro-flight-segment>
|
|
279
|
-
</auro-flightline>
|
|
280
|
-
<span slot="footer">
|
|
281
|
-
<auro-icon category="logos" name="tail-AS" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
282
|
-
AS161 is subject to government approval <br aria-hidden="true"/>
|
|
283
|
-
<auro-icon category="logos" name="tail-AA" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
284
|
-
AA2269 is operated by American Airlines
|
|
285
|
-
</span>
|
|
286
|
-
</auro-flight>
|
|
287
|
-
```
|
|
288
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
289
|
-
</auro-accordion>
|
|
290
|
-
|
|
291
|
-
## Using the footer slot
|
|
292
|
-
|
|
293
|
-
In this example for a flight that requires government approval or a flight that is operated by another subsidiary or partner carrier, you can use the `footer` custom element slot to insert additional information into the scope of the component. Notice the use of `<auro-icon>` and text within the named slot element.
|
|
294
|
-
|
|
295
|
-
This slot requires the consumer to manually manage what is read back via the screen reader through the use of `aria-hidden="true"`.
|
|
296
|
-
|
|
297
|
-
<div class="exampleWrapper">
|
|
298
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/footerSlot.html) -->
|
|
299
|
-
<!-- The below content is automatically added from ./../apiExamples/footerSlot.html -->
|
|
300
|
-
<auro-flight
|
|
301
|
-
flights='["EK 772"]'
|
|
302
|
-
duration="465"
|
|
303
|
-
departureTime="2022-05-04T07:50:00+04:00"
|
|
304
|
-
departureStation="DXB"
|
|
305
|
-
arrivalTime="2022-05-04T15:35:00+04:00"
|
|
306
|
-
arrivalStation="CPT">
|
|
307
|
-
<auro-flightline></auro-flightline>
|
|
308
|
-
<span slot="footer">
|
|
309
|
-
<auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
310
|
-
EK 772 is subject to government approval <br aria-hidden="true"/>
|
|
311
|
-
<auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
312
|
-
EK 772 is operated by Emirates
|
|
313
|
-
</span>
|
|
314
|
-
</auro-flight>
|
|
315
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
316
|
-
</div>
|
|
317
|
-
<auro-accordion alignRight>
|
|
318
|
-
<span slot="trigger">See code</span>
|
|
319
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/footerSlot.html) -->
|
|
320
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/footerSlot.html -->
|
|
321
|
-
|
|
322
|
-
```html
|
|
323
|
-
<auro-flight
|
|
324
|
-
flights='["EK 772"]'
|
|
325
|
-
duration="465"
|
|
326
|
-
departureTime="2022-05-04T07:50:00+04:00"
|
|
327
|
-
departureStation="DXB"
|
|
328
|
-
arrivalTime="2022-05-04T15:35:00+04:00"
|
|
329
|
-
arrivalStation="CPT">
|
|
330
|
-
<auro-flightline></auro-flightline>
|
|
331
|
-
<span slot="footer">
|
|
332
|
-
<auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
333
|
-
EK 772 is subject to government approval <br aria-hidden="true"/>
|
|
334
|
-
<auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
|
|
335
|
-
EK 772 is operated by Emirates
|
|
336
|
-
</span>
|
|
337
|
-
</auro-flight>
|
|
338
|
-
```
|
|
339
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
340
|
-
</auro-accordion>
|
|
341
|
-
In this example, the `footer` slot is used to alert the customer that a First Class option is available.
|
|
342
|
-
|
|
343
|
-
<div class="exampleWrapper">
|
|
344
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/footerSlot2.html) -->
|
|
345
|
-
<!-- The below content is automatically added from ./../apiExamples/footerSlot2.html -->
|
|
346
|
-
<auro-flight
|
|
347
|
-
flights='["AS 73"]'
|
|
348
|
-
duration="100"
|
|
349
|
-
departureTime="2022-05-03T22:45:00-09:00"
|
|
350
|
-
departureStation="JNU"
|
|
351
|
-
arrivalTime="2022-05-04T00:25:00-09:00"
|
|
352
|
-
arrivalStation="CDV">
|
|
353
|
-
<auro-flightline>
|
|
354
|
-
</auro-flightline>
|
|
355
|
-
<span slot="footer">First Class Upgrade available</span>
|
|
356
|
-
</auro-flight>
|
|
357
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
358
|
-
</div>
|
|
359
|
-
<auro-accordion alignRight>
|
|
360
|
-
<span slot="trigger">See code</span>
|
|
361
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/footerSlot2.html) -->
|
|
362
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/footerSlot2.html -->
|
|
363
|
-
|
|
364
|
-
```html
|
|
365
|
-
<auro-flight
|
|
366
|
-
flights='["AS 73"]'
|
|
367
|
-
duration="100"
|
|
368
|
-
departureTime="2022-05-03T22:45:00-09:00"
|
|
369
|
-
departureStation="JNU"
|
|
370
|
-
arrivalTime="2022-05-04T00:25:00-09:00"
|
|
371
|
-
arrivalStation="CDV">
|
|
372
|
-
<auro-flightline>
|
|
373
|
-
</auro-flightline>
|
|
374
|
-
<span slot="footer">First Class Upgrade available</span>
|
|
375
|
-
</auro-flight>
|
|
376
|
-
```
|
|
377
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
378
|
-
</auro-accordion>
|
|
379
|
-
|
|
380
|
-
## Using the optional departure reroute information
|
|
381
|
-
|
|
382
|
-
The following example illustrates additional data regarding departure reroute information.
|
|
383
|
-
|
|
384
|
-
<div class="exampleWrapper">
|
|
385
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reroute1.html) -->
|
|
386
|
-
<!-- The below content is automatically added from ./../apiExamples/reroute1.html -->
|
|
387
|
-
<auro-flight
|
|
388
|
-
flights='["AS 8"]'
|
|
389
|
-
duration="330"
|
|
390
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
391
|
-
departureStation="SEA"
|
|
392
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
393
|
-
arrivalStation="EWR"
|
|
394
|
-
reroutedArrivalStation="AVP">
|
|
395
|
-
<auro-flightline></auro-flightline>
|
|
396
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
397
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
398
|
-
</auro-flight>
|
|
399
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
400
|
-
</div>
|
|
401
|
-
<auro-accordion alignRight>
|
|
402
|
-
<span slot="trigger">See code</span>
|
|
403
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reroute1.html) -->
|
|
404
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/reroute1.html -->
|
|
405
|
-
|
|
406
|
-
```html
|
|
407
|
-
<auro-flight
|
|
408
|
-
flights='["AS 8"]'
|
|
409
|
-
duration="330"
|
|
410
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
411
|
-
departureStation="SEA"
|
|
412
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
413
|
-
arrivalStation="EWR"
|
|
414
|
-
reroutedArrivalStation="AVP">
|
|
415
|
-
<auro-flightline></auro-flightline>
|
|
416
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
417
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
418
|
-
</auro-flight>
|
|
419
|
-
```
|
|
420
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
421
|
-
</auro-accordion>
|
|
422
|
-
|
|
423
|
-
## Using the optional arrival reroute information
|
|
424
|
-
|
|
425
|
-
The following example illustrates additional data regarding arrival reroute information.
|
|
426
|
-
|
|
427
|
-
<div class="exampleWrapper">
|
|
428
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reroute2.html) -->
|
|
429
|
-
<!-- The below content is automatically added from ./../apiExamples/reroute2.html -->
|
|
430
|
-
<auro-flight
|
|
431
|
-
flights='["AS 8"]'
|
|
432
|
-
duration="330"
|
|
433
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
434
|
-
departureStation="SEA"
|
|
435
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
436
|
-
arrivalStation="EWR"
|
|
437
|
-
reroutedDepartureStation="PAE">
|
|
438
|
-
<auro-flightline></auro-flightline>
|
|
439
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
440
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
441
|
-
</auro-flight>
|
|
442
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
443
|
-
</div>
|
|
444
|
-
<auro-accordion alignRight>
|
|
445
|
-
<span slot="trigger">See code</span>
|
|
446
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reroute2.html) -->
|
|
447
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/reroute2.html -->
|
|
448
|
-
|
|
449
|
-
```html
|
|
450
|
-
<auro-flight
|
|
451
|
-
flights='["AS 8"]'
|
|
452
|
-
duration="330"
|
|
453
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
454
|
-
departureStation="SEA"
|
|
455
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
456
|
-
arrivalStation="EWR"
|
|
457
|
-
reroutedDepartureStation="PAE">
|
|
458
|
-
<auro-flightline></auro-flightline>
|
|
459
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
460
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
461
|
-
</auro-flight>
|
|
462
|
-
```
|
|
463
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
464
|
-
</auro-accordion>
|
|
465
|
-
|
|
466
|
-
## Using the optional departure/arrival header slots
|
|
467
|
-
|
|
468
|
-
The following example illustrates additional data regarding departure and arrival information.
|
|
469
|
-
|
|
470
|
-
<div class="exampleWrapper">
|
|
471
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/headerSlot.html) -->
|
|
472
|
-
<!-- The below content is automatically added from ./../apiExamples/headerSlot.html -->
|
|
473
|
-
<auro-flight
|
|
474
|
-
flights='["AS 8"]'
|
|
475
|
-
duration="330"
|
|
476
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
477
|
-
departureStation="SEA"
|
|
478
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
479
|
-
arrivalStation="EWR"
|
|
480
|
-
reroutedDepartureStation="PDX"
|
|
481
|
-
reroutedArrivalStation="AVP">
|
|
482
|
-
<auro-flightline></auro-flightline>
|
|
483
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
484
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
485
|
-
</auro-flight>
|
|
486
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
487
|
-
</div>
|
|
488
|
-
<auro-accordion alignRight>
|
|
489
|
-
<span slot="trigger">See code</span>
|
|
490
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/headerSlot.html) -->
|
|
491
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/headerSlot.html -->
|
|
492
|
-
|
|
493
|
-
```html
|
|
494
|
-
<auro-flight
|
|
495
|
-
flights='["AS 8"]'
|
|
496
|
-
duration="330"
|
|
497
|
-
departureTime="2022-07-30T07:40:00-07:00"
|
|
498
|
-
departureStation="SEA"
|
|
499
|
-
arrivalTime="2022-07-30T16:40:00-04:00"
|
|
500
|
-
arrivalStation="EWR"
|
|
501
|
-
reroutedDepartureStation="PDX"
|
|
502
|
-
reroutedArrivalStation="AVP">
|
|
503
|
-
<auro-flightline></auro-flightline>
|
|
504
|
-
<span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
|
|
505
|
-
<span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
|
|
506
|
-
</auro-flight>
|
|
507
|
-
```
|
|
508
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
509
|
-
</auro-accordion>
|
|
510
|
-
<hr/>
|
|
511
|
-
|
|
512
|
-
## Recommended Use and Version Control
|
|
513
|
-
|
|
514
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-flight` custom element is defined automatically.
|
|
515
|
-
|
|
516
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroFlight.register(name)` method and pass in a unique name.
|
|
517
|
-
|
|
518
|
-
```js
|
|
519
|
-
import { AuroFlight } from '@aurodesignsystem/auro-flight/class';
|
|
520
|
-
|
|
521
|
-
AuroFlight.register('custom-flight');
|
|
522
|
-
```
|
|
523
|
-
|
|
524
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-flight>` element.
|
|
525
|
-
|
|
526
|
-
<div class="exampleWrapper exampleWrapper--flex">
|
|
527
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
|
|
528
|
-
<!-- The below content is automatically added from ./../apiExamples/custom.html -->
|
|
529
|
-
<custom-flight
|
|
530
|
-
flights='["AS 1436"]'
|
|
531
|
-
duration="161"
|
|
532
|
-
departureTime="2022-07-13T12:15:00-07:00"
|
|
533
|
-
departureStation="SEA"
|
|
534
|
-
arrivalTime="2022-07-13T14:56:00-07:00"
|
|
535
|
-
arrivalStation="LAX">
|
|
536
|
-
<auro-flightline></auro-flightline>
|
|
537
|
-
</custom-flight>
|
|
538
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
539
|
-
</div>
|
|
540
|
-
<auro-accordion alignRight>
|
|
541
|
-
<span slot="trigger">See code</span>
|
|
542
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
|
|
543
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
|
|
544
|
-
|
|
545
|
-
```html
|
|
546
|
-
<custom-flight
|
|
547
|
-
flights='["AS 1436"]'
|
|
548
|
-
duration="161"
|
|
549
|
-
departureTime="2022-07-13T12:15:00-07:00"
|
|
550
|
-
departureStation="SEA"
|
|
551
|
-
arrivalTime="2022-07-13T14:56:00-07:00"
|
|
552
|
-
arrivalStation="LAX">
|
|
553
|
-
<auro-flightline></auro-flightline>
|
|
554
|
-
</custom-flight>
|
|
555
|
-
```
|
|
556
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
557
|
-
</auro-accordion>
|
|
558
|
-
|
|
559
|
-
## DoT regulations
|
|
560
|
-
|
|
561
|
-
Department of Transportation regulations mandate that the arrival and departure cities' font size and color be identical to the operational disclosures (for instance, AA 3210 is operated by Envoy Air on behalf of American Airlines).
|
|
562
|
-
|
|
563
|
-
## Accessibility
|
|
564
|
-
|
|
565
|
-
The `<auro-flight>` custom element is accessible by screen readers by default. Due to the style of content within, while this is accessible, it's up to the user of the element to determine if information is useable and/or necessary for a screen reader experience. If this element is being used for illustrative purposes and the details of the flight are outlined in greater detail outside the scope of this element, `aria-hidden='true'` is recommended.
|
|
76
|
+
</auro-accordion>
|
|
77
|
+
|