{"id":21294080,"url":"https://github.com/alaskaairlines/auro-flight","last_synced_at":"2026-01-22T19:29:29.377Z","repository":{"id":40572038,"uuid":"335510377","full_name":"AlaskaAirlines/auro-flight","owner":"AlaskaAirlines","description":"HTML custom element that supports Alaska's flight result experience","archived":false,"fork":false,"pushed_at":"2024-11-12T17:37:37.000Z","size":2421,"stargazers_count":3,"open_issues_count":8,"forks_count":2,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-11-20T06:06:35.640Z","etag":null,"topics":["auro","custom-element","design-system","generator-v3-16-0"],"latest_commit_sha":null,"homepage":"https://auro.alaskaair.com/components/auro/flight","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlaskaAirlines.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-03T04:48:56.000Z","updated_at":"2024-11-12T17:37:39.000Z","dependencies_parsed_at":"2023-02-15T12:45:56.345Z","dependency_job_id":"e80cc8be-1a60-4bce-bd1c-fe13ee1878e4","html_url":"https://github.com/AlaskaAirlines/auro-flight","commit_stats":{"total_commits":169,"total_committers":14,"mean_commits":"12.071428571428571","dds":0.5384615384615384,"last_synced_commit":"e23a36d4e81217f8a3b06ac8627b3bcc708c7a1d"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-flight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-flight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-flight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-flight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlaskaAirlines","download_url":"https://codeload.github.com/AlaskaAirlines/auro-flight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225741076,"owners_count":17516895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auro","custom-element","design-system","generator-v3-16-0"],"created_at":"2024-11-21T13:57:40.889Z","updated_at":"2026-01-22T19:29:29.367Z","avatar_url":"https://github.com/AlaskaAirlines.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nThe README.md file is a compiled document. No edits should be made directly to this file.\n\nREADME.md is created by running `npm run build:docs`.\n\nThis file is generated based on a template fetched from\n`https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`\nand copied to `./componentDocs/README.md` each time the docs are compiled.\n\nThe following sections are editable by making changes to the following files:\n\n| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |\n|------------------------|---------------------------------------------------|-------------------------------------|\n| Description            | Description of the component                      | `./docs/partials/description.md`    |\n| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |\n| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |\n| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |\n--\u003e\r\n\r\n# Flight\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/description.md --\u003e\nThe `\u003cauro-flight\u003e` 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.\r\n\r\n## Dependencies\n\nThe `\u003cauro-flight\u003e` element has dependencies on the following additional Auro custom elements.\n\n```\n  └── @aurodesignsystem/auro-flightline\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-segment\n\n  └── @aurodesignsystem/auro-flight\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-header\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-main\n  |  └── (external dependency) @aurodesignsystem/auro-datetime\n```\n\nSee [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `\u003cauro-flight-segment\u003e` API.\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md --\u003e\r\n\r\n## Dependencies\n\nThe `\u003cauro-flight\u003e` element has dependencies on the following additional Auro custom elements.\n\n```\n  └── @aurodesignsystem/auro-flightline\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-segment\n\n  └── @aurodesignsystem/auro-flight\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-header\n  |  ├── (internal dependency) @aurodesignsystem/auro-flight-main\n  |  └── (external dependency) @aurodesignsystem/auro-datetime\n```\n\nSee [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `\u003cauro-flight-segment\u003e` API.\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Use Cases\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/useCases.md --\u003e\nThe `\u003cauro-flight\u003e` element should be used in situations where users may:\n\n* list all the available data for a flight\n* list all stopovers or layovers for a flight\n* list connecting flights or other important information\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Install\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) --\u003e\n[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-flight/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-flight/actions/workflows/release.yml)\n[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-flight?style=for-the-badge\u0026color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-flight)\n[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-flight?color=blue\u0026style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)\n![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)\r\n\r\n```shell\n$ npm i @aurodesignsystem/auro-flight\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Define Dependency in Project\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) --\u003e\nDefining the dependency within each project that is using the `\u003cauro-flight\u003e` component.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) --\u003e\r\n\r\n```js\nimport \"@aurodesignsystem/auro-flight\";\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Use CDN\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) --\u003e\nIn cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-flight@latest/+esm\"\u003e\u003c/script\u003e\r\n```\r\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Basic Example\n\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/basic.html --\u003e\r\n\r\n```html\n\u003cauro-flight\n  flights='[\"AS 1436\"]'\n  duration=\"161\"\n  departureTime=\"2022-07-13T12:15:00-07:00\"\n  departureStation=\"SEA\"\n  arrivalTime=\"2022-07-13T14:56:00-07:00\"\n  arrivalStation=\"LAX\"\u003e\n  \u003cauro-flightline\u003e\u003c/auro-flightline\u003e\n\u003c/auro-flight\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Custom Component Registration for Version Management\n\nThere are two key parts to every Auro component: the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\"\u003eclass\u003c/a\u003e and the custom element definition.\nThe class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.\n\nWhen you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.\n\nHowever, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.\n\nYou can do this by importing only the component class and using the `register(name)` method with a unique name:\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/customRegistration.md --\u003e\r\n\r\n```js\n// Import the class only\nimport { AuroFlight } from '@aurodesignsystem/auro-flight/class';\n\n// Register with a custom name if desired\nAuroFlight.register('custom-flight');\n```\n\nThis will create a new custom element `\u003ccustom-flight\u003e` that behaves exactly like `\u003cauro-flight\u003e`, allowing both to coexist on the same page without interfering with each other.\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003cdiv class=\"exampleWrapper exampleWrapper--flex\"\u003e\n  \u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) --\u003e\n  \u003c!-- The below content is automatically added from ./apiExamples/custom.html --\u003e\n  \u003ccustom-flight\n    flights='[\"AS 1436\"]'\n    duration=\"161\"\n    departureTime=\"2022-07-13T12:15:00-07:00\"\n    departureStation=\"SEA\"\n    arrivalTime=\"2022-07-13T14:56:00-07:00\"\n    arrivalStation=\"LAX\"\u003e\n    \u003cauro-flightline\u003e\u003c/auro-flightline\u003e\n  \u003c/custom-flight\u003e\n  \u003c!-- AURO-GENERATED-CONTENT:END --\u003e\n\u003c/div\u003e\r\n\u003cauro-accordion alignRight\u003e\n  \u003cspan slot=\"trigger\"\u003eSee code\u003c/span\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/custom.html --\u003e\r\n\r\n```html\n\u003ccustom-flight\n  flights='[\"AS 1436\"]'\n  duration=\"161\"\n  departureTime=\"2022-07-13T12:15:00-07:00\"\n  departureStation=\"SEA\"\n  arrivalTime=\"2022-07-13T14:56:00-07:00\"\n  arrivalStation=\"LAX\"\u003e\n  \u003cauro-flightline\u003e\u003c/auro-flightline\u003e\n\u003c/custom-flight\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c/auro-accordion\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-flight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaskaairlines%2Fauro-flight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-flight/lists"}