open-index/open-npm huggingface dataset:
npm package: @hopper-cloud-airlines/angular-sdk
Description: This project aims to provide a set of Angular components to subscribe to HTS services such as "Cancel for any reason".
Author: HTS - Airlines Team
Latest version: 6.3.8

# Angular SDK

This project aims to provide a set of Angular components to subscribe to HTS services such as "Cancel for any reason".

## Changelog

[Changelog](https://github.com/hopper/hc-airlines-angular/blob/main/projects/angular-sdk/CHANGELOG.md)

## Angular compatibility

|  Package version 	|   Angular Version	|
|---	            |---	            |
|   6.0.0 and above |   Angular 15	    |
|   5.0.1           |   Angular 14	    |
|   4.3.3           |   Angular 13	    |
|   3.0.0	        |   Angular 12	    |
|   2.10.0	        |   Angular 11	    |

## Configuration

### 1. Install the package

```
npm install @hopper-cloud-airlines/angular-sdk@latest
```

### 2. Import module

Add this module to your Angular app

```
import { HopperCloudAirlinesAngularSdkModule } from '@hopper-cloud-airlines/angular-sdk';

// ...

@NgModule({
  imports: [
    // ...

    HopperCloudAirlinesAngularSdkModule
  ]
})
export class YourModule { }
```

### 3. Configure Theming

1. If you have an Angular Material theme configured

    In your `styles.scss`, add following code :

    ```
    // Apply the theme to HTS components 
    @import "node_modules/@hopper-cloud-airlines/angular-sdk/src/styles/theme.scss";
    
    @include hopper-cloud-airlines-angular-sdk-components-theme($your-angular-material-theme);
    ```

2. If you want to use a theme provided by HTS

    In your `styles.scss`, add following code :

    ```
    // Load the themes provided by HTS
    @import "node_modules/@hopper-cloud-airlines/angular-sdk/src/styles/theme.scss";
    ```

    - For dialog components :

    Pass the theme name as a parameter in the dialog configuration

    ```
    import { DialogUtils } from '@hopper-cloud-airlines/angular-sdk';

    // ...

    const dialogData = { ... };
    const dialogConfig = DialogUtils.getDialogConfig(dialogData, 'HOPPER-THEME-CLASS');
    const dialogRef = this._dialog.open(HOPPER_COMPONENT, dialogConfig);
    ```
    - For other components :

    Encapsulate each HTS components into an HTML element with the HTS theme class :

    ```
    <div class="HOPPER-THEME-CLASS">
        <!-- <HOPPER-COMPONENT>...</HOPPER-COMPONENT> -->
    </div>
    ```

    More simply you can also add the HTS theme class in the class attribute of the Body tag

    ```
    <body class="HOPPER-THEME-CLASS">

        <!-- Your code / Apps / ... -->

        <!-- <HOPPER-COMPONENT>...</HOPPER-COMPONENT> -->
    </body>
    ```

### Configure Assets for the SDK

In your angular.json file into your Angular project, you need to add following lines in the `assets` parameter :

```
{
    "glob": "**/*",
    "input": "./node_modules/@hopper-cloud-airlines/angular-sdk/assets",
    "output": "/assets/"
}
```
npm package: @hopper-ui/components
Description: The components package.
Author: Workleap
Latest version: 2.0.16

# @hopper-ui/components

Hopper is a design system developed by Workleap to help create the best experience for our customers and drive consistency between all our web apps.

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/components)](https://www.npmjs.com/package/@hopper-ui/components)

## Installation

Install the following packages:

**With pnpm**

```shell
pnpm add @hopper-ui/components
```

**With yarn**

```shell
yarn add @hopper-ui/components
```

**With npm**

```shell
npm install @hopper-ui/components
```

## Usage

View the [user's documentation](https://hopper.workleap.design/).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.
npm package: @hopper-ui/icons
Description: The icons package.
Author: Workleap
Latest version: 3.0.1

# @hopper-ui/icons

A set of icons handcrafted by Workleap.

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/icons)](https://www.npmjs.com/package/@hopper-ui/icons)

## Usage

View the [user's documentation](https://hopper.workleap.design/).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.
npm package: @hopper-ui/icons-react16
Description: The icons package that targets React 16.
Author: Workleap
Latest version: 2.5.1

# @hopper-ui/icons-react16

A set of icons handcrafted by Workleap. This package is meant to be temporary, to allow teams that are still using React 16 to be able to have access to the shared icons.

> This package assumes that you are importing the CSS tokens from Hopper in your application. If you are not, icon colors will not be applied.

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/icons-react16)](https://www.npmjs.com/package/@hopper-ui/icons-react16)

## Installation

### Install packages

**With pnpm**

```shell
pnpm add @hopper-ui/icons-react16
```

**With yarn**

```shell
yarn add @hopper-ui/icons-react16
```

**With npm**

```shell
npm install @hopper-ui/icons-react16
```

### Import Styles
```css
/* in your root css */
@import "@hopper-ui/icons-react16/index.css";
```


https://wl-hopper.netlify.app/icons/react-icons/standalone-installation#import-styles

### Start using icons

```tsx
    import { AddIcon } from "@hopper-ui/icons-react16";

    export const App = () => (
        <div>
            <span>Hello World!</span>
            <AddIcon size="sm" />
        </div>
    );
```

## Available Icons

View the [library](https://wl-hopper.netlify.app/icons/react-icons/library).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.
npm package: @hopper-ui/styled-system
Description: The styled-system package.
Author: Workleap
Latest version: 3.1.8

# @hopper-ui/styled-system

Hopper's styled-system offers a collection of utility functions that add style props to your React components. These style props are in sync on hopper-ui's design tokens, are type safe, and support responsive styles.

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/styled-system)](https://www.npmjs.com/package/@hopper-ui/styled-system)

## Usage

View the [user's documentation](https://hopper.workleap.design/).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.
npm package: @hopper-ui/svg-icons
Description: A set of icons handcrafted by Workleap
Author: Workleap
Latest version: 2.19.3

# @hopper-ui/svg-icons

A set of icons handcrafted by Workleap.

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/svg-icons)](https://www.npmjs.com/package/@hopper-ui/svg-icons)

## Usage

View the [user's documentation](https://hopper.workleap.design/).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.
npm package: @hopper-ui/tokens
Description: The tokens package.
Author: Workleap
Latest version: 5.1.8

# @hopper-ui/tokens

Hopper tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](../../LICENSE)
[![npm version](https://img.shields.io/npm/v/@hopper-ui/tokens)](https://www.npmjs.com/package/@hopper-ui/tokens)

## Usage

View the [user's documentation](https://hopper.workleap.design/).

## 🤝 Contributing

View the [contributor's documentation](https://github.com/workleap/wl-hopper/blob/main/CONTRIBUTING.md).

## License

Copyright © 2023, Workleap. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/workleap/workleap-license/blob/master/LICENSE.