open-index/open-npm huggingface dataset:
npm package: @flet/microsoft-teams-js
Description: Microsoft Client SDK for building app for Microsoft teams
Author: Microsoft Teams
Latest version: 999.0.2

# This package was published as a temporary fix for registerOnRemoveHandler not working for connectors. It was forked from @microsoft/teams-js 1.6.0. Please check the original repo to see if this has been fixed before using this one.

# [Microsoft Teams JavaScript Library](https://msdn.microsoft.com/en-us/microsoft-teams/)

This JavaScript library is part of the [Microsoft Teams developer platform](https://msdn.microsoft.com/en-us/microsoft-teams/). For documentation, see [Reference: Microsoft Teams JavaScript library](https://docs.microsoft.com/en-us/javascript/api/overview/msteams-client).

[![Build Status](https://travis-ci.org/OfficeDev/microsoft-teams-library-js.svg?branch=master)](https://travis-ci.org/OfficeDev/microsoft-teams-library-js)
[![Coverage Status](https://coveralls.io/repos/github/OfficeDev/microsoft-teams-library-js/badge.svg?branch=master)](https://coveralls.io/github/OfficeDev/microsoft-teams-library-js?branch=master)

## Getting Started

1.  Clone the repo
2.  Navigate to the repo root
3.  `yarn install`
4.  `yarn build`
5.  to run Unit test `yarn test`

### Installation

To install the stable version:

#### npm

`npm install --save @microsoft/teams-js`

#### yarn

`yarn add @microsoft/teams-js`

#### Production

You can access [these files on unpkg](https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js), download them, or point your package manager to them.

## Usage

### As a npm package

Install either using npm or yarn

**If you are using any dependency loader** such as [RequireJS](http://requirejs.org/) or [SystemJS](https://github.com/systemjs/systemjs) or module bundler such as [browserify](http://browserify.org/), [webpack](https://webpack.github.io/), you can use `import` syntax to import specific modules. For e.g.

```typescript
import * as microsoftTeams from "@microsoft/teams-js";
```

### As a Script Tag

Reference the library inside of your `.html` page using:

```html
<!-- Microsoft Teams JavaScript API (via CDN) -->
<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js" integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT" crossorigin="anonymous"></script>

<!-- Microsoft Teams JavaScript API (via npm) -->
<script src="node_modules/@microsoft/teams-js@1.6.0/dist/MicrosoftTeams.min.js"></script>

<!-- Microsoft Teams JavaScript API (via local) -->
<script src="MicrosoftTeams.min.js"></script>
```

## Contributing

We strongly welcome and encourage contributions to this project. Please read the [contributor's guide](CONTRIBUTING.md).

---

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
npm package: @flet/xml-nodes
Description: Streaming XML node splitter
Author: Tim Hudson
Latest version: 1.0.0

# @flet/xml-nodes

[![Build Status](https://img.shields.io/travis/timhudson/xml-nodes.svg?style=flat-square)](https://travis-ci.org/timhudson/xml-nodes)

[![NPM](https://nodei.co/npm/@flet/xml-nodes.png?downloads=true&downloadRank=true)](https://nodei.co/npm/xml-nodes/)

Streaming XML node splitter

Have a large XML file and only interesting in one type of tag? `xml-nodes` accepts a tag name and returns a stream which emits each tag as a string.

## NOTE: This package is meant to be a placeholder until [this bugfix PR](https://github.com/timhudson/xml-nodes/pull/5) gets merged!

## Install

With [npm](https://npmjs.org/) do:

```
npm install @flet/xml-nodes
```


## Example

```javascript
var request = require('request')
var xmlNodes = require('xml-nodes')

request('http://news.yahoo.com/rss/entertainment')
  .pipe(xmlNodes('item'))
  .pipe(process.stdout)
```

## License

MIT
npm package: @fletchers-tools/e2e-toolkit
Description: A set of tools for seamless e2e-tests writing experience
Author: Fletcher Lind
Latest version: 1.0.1

# E2EToolkit

![Code Sample](./docs/images/code-sample.png)

E2EToolkit is a set of tools that aims to make the process for writing e2e-tests 
less tricky and more comfortable, so you can focus on testing scenarios.

> Why and how to use [Test Attributes](docs/TestAttributes.md)

Tools:
- [Q Helper](docs/QHelper.md) // Provides shortcuts for css-queries
- [R Helper](docs/RHelper.md) // Provides shortcuts for url-patterns
- [Element Lookup Assistant](https://github.com/FletcherTools/e2e-toolkit-ela) // Helps to figure out element's test-id without digging into the elements' tree.

## Helpers
### Initialization
```ts
import { e2eHelpersFactory } from 'e2e-toolkit';
export const { q, r } = e2eHelpersFactory(/* Config */);
```
or
```ts
import { e2eHelpersFactory } from 'e2e-toolkit';
const { q, r } = e2eHelpersFactory(/* Config */);

global.q = q;
global.r = r;
```

### Configuration
#### Default config
```ts
interface E2EHelpersConfig {
    customSelectorPrefix: string
    pseudoSelectorPrefix: string
    pseudoSelectorMap: Record<string, string>
}

const config: E2EHelpersConfig = {
    customSelectorPrefix: '%',
    pseudoSelectorPrefix: '%%',
    pseudoSelectorMap: {},
}
```

## Related resources
- [Cypress](https://github.com/cypress-io/cypress) // a next generation front end testing tool built for the modern web
npm package: @fletchers-tools/e2e-toolkit-ela
Description: E2EToolkit: Element Lookup Assistant. A tool that helps to figure out element's test-id without digging into the elements' tree.
Author: Fletcher Lind
Latest version: 1.0.6

# E2EToolkit: Element Lookup Assistant

**Element Lookup Assistant** being a part of `e2e-toolkit` allows you to find out a particular element's **test id** very quickly.

## Initialization
```ts
import('e2e-toolkit-ela').then(({ ELAComponent }) => {
    ELAComponent({
        pseudoSelectorMap: {
            'first': '.first',
            'second': '.second input[disabled=true]',
            'third=$name': '.third[label=$name]',
            'fourth=$name': '.fourth:has(strong:contains($name), em:contains($name))'
        }
    });
})
```

## Configuration
### Default config
```ts
export interface ELAConfig {
    customSelectorPrefix: string
    pseudoSelectorPrefix: string
    activateShortcut: string
    relocateShortcut: string
    pseudoSelectorMap: Record<string, string>
}

const defaultConfig: ELAConfig = {
    customSelectorPrefix: '%',
    pseudoSelectorPrefix: '%%',
    activateShortcut: 'ctrl+alt+l',
    relocateShortcut: 'ctrl+alt+p',
    pseudoSelectorMap: {}
};
```
### Pseudo-selector's `$name` parameter
`e2e-toolkit` allows the `$name` parameter be in any part of a target query-selector,
but it's not so easy to go in the opposite direction and get a pseudo-selector without knowing 
what name is going to be used, so ELA restricts you to use the `$name` parameter 
only as a value for an attribute or `:contains()` selector.
```ts
const config = {
    pseudoSelectorMap: {
        /* OK */
        'foo1=$name': '.foo[label=$name]', // ok
        'foo2=$name': '.foo[label*=$name]', // ok
        'foo3=$name': '.foo:contains($name)', // ok
        
        /* OK for q helper, but won't work in ELA */
        'foo4=$name': '.foo[label=prefix_$name]',
        'foo5=$name': '.foo:contains($name_postfix)',
        'foo6=$name': '.foo.prefix_$name',
    }
}
```

## Usage
### Activate
Use `CTRL+ALT+L` shortcut on your site to activate ELA

![ELA interface](./docs/ela-interface.png)

Click on a custom- or a pseudo-selector name to copy it to the clipboard and use it in your test cases along with `q` helper.
Click on a selector with a pressed `CTRL` key to copy a full path to the element (but remember it's not necessary to use a full path to reach the element, keep it as short as possible).

You can also use `CTRL+ALT+P` to change tooltip's positioning if tooltips start overlapping each other.
npm package: @fletchers-tools/projenerator
Description: Template-based boilerplate code generator
Author: Fletcher Lind
Latest version: 2.0.2

# Projenerator
Template-based boilerplate code generator

## 1. Create a config file
Create a `.projenerator` directory inside your project and add a projenerator config file.

**.projenerator/config.json**
```
{
  "targetDir": "../src",
}
```

## 2. Add templates
Add handlebars templates inside `.projenerator/templates` directory

**You can use handlebars templates syntax inside both directories/files names and it's content**

You will have `entityName` and `entityNamePlural` variables available in your template's context, 
but **avoid using them as they are**, **ensure they have a proper casing** by combining them with case-transform helpers: 
`camel`, `pascal`, `kebab`, `snake`, `upper-snake` and `upper`

```handlebars
{{entityName}}
{{entityNamePlural}}

{{camel entityName}} // entityName
{{pascal entityName}} // EntityName
{{kebab entityName}} // entity-name
{{snake entityName}} // entity_name

{{upper (snake entityName)}} // ENTITY_NAME
{{upper-snake entityName}} // ENTITY_NAME
```
**Example .projenerator directory structure:**
```handlebars
.projenerator
    - config.json
    - templates
        - component
            - {{pascal entityName}}
                - {{camel entityName}}.module.scss.hbs
                - {{pascal entityName}}.tsx.hbs
                - index.ts.hbs
            - {{pascal entityName}}--extended // --variant=extended
                - {{camel entityName}}.module.scss.hbs
                - {{pascal entityName}}Context.tsx.hbs
                - {{pascal entityName}}.tsx.hbs
                - index.ts.hbs
        - helper
          - {{camel entityName}}.helper.ts.hbs
```

## 3. Generate code
Use `make` command to generate a boilerplate code
```
# projenerator make entity-type entity-name
projenerator make component test-component
```
**Pass additional options to have more control over the generation process**
```
projenerator make component person --plural=people --variant=extended --scope=features/user
```

### Make command structure:
```
projenerator make
    <entity-type> // Entity type
    <entity-name> // Entity name
    -p, --plural <plural> // Entity plural name
    -v, --variant <variant> // Variant modifier
    -s, --scope <scope> // Scope modifier (pass relative target path for a generated enitity)
```
npm package: @fleur/create-next-app
Description: Next.js app generator with Fleur
Author: Mitsuka Hanakura
Latest version: 1.0.1
Deprecated: It has been deprecated due to a problem that `yarn create` cannot resolve the executable. Use `@fleur/create-fleur-next-app` instead.

# 🌼 @fleur/create-next-app ▲ [![npm version](https://badge.fury.io/js/%40fleur%2Fcreate-next-app.svg)](https://www.npmjs.com/package/@fleur/create-next-app)

Create Next.js application with [fleur](https://github.com/fleur-js/fleur)

## Quick start

With yarn: `yarn create @fleur/next-app <your-app-name>`

With npm: `npx @fleur/create-next-app <your-app-name> --use-npm`
npm package: @fleur/di
Description: Simply DI container without any dependency for TypeScript
Author: Ragg
Latest version: 1.0.2

# 🌼 fleur-di 💉 [![npm version](https://badge.fury.io/js/%40ragg%2Ffleur-di.svg)](https://www.npmjs.com/package/@fleur/di) [![travis](https://travis-ci.org/ra-gg/fleur.svg?branch=master)](https://travis-ci.org/ra-gg/fleur)

Simply DI container without any dependency for TypeScript

## Example

```typescript
import { inject } from '@fleur/di'
import { getUser } from './api'

const fetchUser = inject({ getUser })(
  (injects) => async (userId: string) => {
    await injects.getUser(userId)
  },
)

// Fetch user data
await fetchUser('1')

// Inject mock
const getUserMock = async (userId: string) => ({ id: userId })
await fetchUser.inject({ getUser: getUserMock }).exec('1')

// with redux-thunk
export const fetchUserAction = inject({ getUser })(
  (injects) => (userId: string) => async (dispatch, getState) => {
    const user = await injects.getUser(userId)
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user })
  },
)

// in tests
dispatch(fetchUserAction.inject({ getUser: getUserMock }).exec('1'))
```
npm package: @fleur/fleur
Description: An Fully-typed Flux framework inspired by Fluxible. Runs on Node / Web.
Author: Ragg
Latest version: 3.1.0

# 🌼 @fleur/fleur 🌼 [![npm version](https://badge.fury.io/js/%40fleur%2Ffleur.svg)](https://www.npmjs.com/package/@fleur/fleur) [![travis](https://travis-ci.org/fleur-js/fleur.svg?branch=master)](https://travis-ci.org/fleur-js/fleur) ![minifiedgzip](https://badgen.net/bundlephobia/minzip/@fleur/fleur)

An Fully-typed Flux framework inspired by Fluxible.
Runs on Node / Web.

(No dependence to React. see [this](https://www.npmjs.com/package/@fleur/react) if you want to use with React.)

## Feature

- Fully typed. Friendly to type inference.
- Comfortable to write code
- Default async operations (side effector) support
- immer.js builtin Store
- Support Redux DevTools

## Example

```typescript
// actions.ts (Action typings)
import { actions, action } from '@fleur/fleur'

export const CounterActions = actions('Counter', {
    increase: action<{ amount: number }>(),
    decrease: action<{ amount: number }>(),
}
```

```typescript
// store.ts (Store)
import { reducerStore } from '@fleur/fleur'
import { CounterActions } from './actions.ts'

interface State {
  count: number
}

export const CounterStore = reducerStore<State>('CounterStore', () => ({
  count: 0
}))
  .listen(CounterActions.increase, (draft, payload) => {
    // immutable changing state with `immer.js`
    draft.count += payload.amount
  })
  .listen(CounterActions.decrease, (draft, payload) => {
    draft.count -= payload.amount
  })
}
```

```typescript
// operations.ts (Action Creator)
import { operations } from '@fleur/fleur'
import { CounterActions } from './actions.ts'

export const CounterOps = operations({
  increase(ctx, amount: number) {
    ctx.dispatch(CounterActions.increase, { amount })
  },
  decrease(ctx, amount: number) {
    ctx.dispatch(CounterActions.decrease, { amount })
  },
})
```

```typescript
// selectors.ts

import { selector } from '@fleur/fleur'
import { CounterStore } from './store.ts'

export const selectCount = selector(getState => getState(CounterStore).count)
```

```typescript
// app.ts
import Fleur, { withReduxDevTools } from '@fleur/fleur'
import { CounterStore } from './store.ts'
import { CounterOps } from './operations.ts'
import { selectCount } from './selectors.ts'

const app = new Fleur({
  stores: [CounterStore],
})
;(async () => {
  const ctx = app.createContext()

  // Enable redux-devtools if you want
  withReduxDevTools(ctx)

  await ctx.executeOperation(CounterOps.increase, 10)
  console.log(selectCount(ctx.getStore)) // => 10

  await ctx.executeOperation(CounterOps.decrease, 20)
  console.log(selectCount(ctx.getStore)) // => -10
})()
```

## How to use with React?

See [`@fleur/react`](https://www.npmjs.com/package/@fleur/react).
npm package: @fleur/fleur-react
Description: `@fleur/fleur` connector for React. (See [`@fleur/fleur`](https://www.npmjs.com/package/@fleur/fleur) for basic usage.)
Author: ragg
Latest version: 1.0.1
Deprecated: @fleur/fleur-react is deprecated, use `@fleur/react` instead

# 🌼 fleur-react ⚛️ [![npm version](https://badge.fury.io/js/%40fleur%2Ffleur-react.svg)](https://www.npmjs.com/package/@fleur/fleur-react) [![travis](https://travis-ci.org/ra-gg/fleur.svg?branch=master)](https://travis-ci.org/ra-gg/fleur) ![minifiedgzip](https://badgen.net/bundlephobia/minzip/@fleur/fleur-react)

`@fleur/fleur` connector for React.
(See [`@fleur/fleur`](https://www.npmjs.com/package/@fleur/fleur) for basic usage.)

## Example

Hooks style:

```tsx
// ./components/AppRoot.tsx
import React, { useCallback } from 'react'
import { useFleurContext, useStore } from '@fleur/fleur-react'
import { increaseOp } from './operations'

export const AppRoot = props => {
  const context = useFleurContext()

  const { count } = useStore([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))

  const handleCountClick = useCallback(() => {
    context.executeOperation(increaseOp)
  }, [])

  return <div onClick={handleCountClick}>{count}</div>
}
```

Class style:

```tsx
// ./components/AppRoot.tsx

import React from 'react'

import {
  createElementWithContext,
  connectToStores,
  withFleurContext,
} from '@fleur/fleur-react'
import { increaseOp } from './operations'
import CountStore from './stores/CountStore'

export default withFleurContext(
  // pick Props from Store with `connectToStores()`
  connectToStores([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))(
    class AppRoot extends React.PureComponent {
      private handleCountClick = () => {
        // ** `this.props.{executeOperation, getStore}` provide by `withFleurContext()`
        this.props.executeOperation(increaseOp)
      }

      render() {
        return <div onClick={this.handleCountClick}>{this.props.count}</div>
      }
    },
  ),
)
```

```tsx
import Fleur from '@fleur/fleur'
import { FleurContext } from '@fleur/fleur-react'
import AppRoot from './components/AppRoot'
import CountStore from './stores/CountStore'

const app = new Fleur({ stores: [ CountStore ] })

const context = app.createContext()
ReactDOM.render(<FleurContext value={context}><AppRoot /></FluerContext>, {})
```
npm package: @fleur/mordred
Description: Perfect React Modal library
Author: Hanakla
Latest version: 1.0.1

# 🌹 @fleur/mordred 🌹

`Mordred (モードレッド)` is Perfect React Modal library at 2021.

## Features

- Have **not** any appearance
  - Mordred manages modal state and positioner element only, design modal your self!
- Better accessibility
  - Auto scroll lock when modal appearered
  - Limit focus only inside on Modal when modal appearered, with [`focus-trap`](https://github.com/focus-trap/focus-trap)
- Both of `JSX style` and `imperative style`
  - Callable from out of React (likes Action creator)
  - Can be connect to another React context likes Redux store from Modal (of course imperative style too)
- Abortable (with `AbortController`)
- Sever-side ready (module is **import safe** in server side)
  - Really works only client side
- Supports backdrop animation
  - Tune it yourself, with react-spring
- Tuned re-rendering region / performance
- Type safe
  - Modal result can be type

## Usage

See full example code (with single backdrop fade) in [this example](https://github.com/fleur-js/mordred/blob/main/pkgs/example)

### Setup

Add `MordredOut` into your App root.

```tsx
import { MordredOut } from "@fleur/mordred";

const App = () => {
  return (
    <div>
      <MordredOut>
        {({ children }) => <YourBackdrop>{children}</YourBackdrop>}
      </MordredOut>
    </div>
  );
};

domready(() => {
  createRoot(yourRootElement).render(<App />);
});
```

### Calling your Modal

And define and call ModalComponet to use it up!

```tsx
// In your page
const SomePage = () => {
  const [isOpened, setIsOpen] = useState(false);
  const { openModal } = useModalOpener();
  const handleClose = (result) => console.log(result);

  const handleClickGotoSleep = useCallback(() => {
    // call your modal here
    const result = await openModal(ConfirmModal, { message: "Sleep?" });
  }, []);

  return (
    <div>
      <button onClick={handleClickGotoSleep}>Sleep</button>
    </div>
  );
};

// Modal component definition
import {
  MordredRenderer,
  ModalComponentType,
  useModalOpener,
} from "@fleur/mordred";

// jsx style
const ConfirmModal: ModalComponentType<{ message: string }, boolean> = ({
  onClose,
}) => (
  <div>
    {message}
    <button onClick={() => onClose(false)}>Cancel</button>
    <button onClick={() => onClose(true)}>Continute</button>
  </div>
);

// imperative style (Stable, but unrecommended)
import { unrecommended_openModal } from "@fleur/mordred";

const result = await openModal(ConfirmModal, { message: "Godmode?" });
```
npm package: @fleur/next
Description: Fleur Next.js helpers
Author: Mitsuka Hanakura
Latest version: 1.0.0

# 🌼 @fleur/next ▲ [![npm version](https://badge.fury.io/js/%40fleur%2Fnext.svg)](https://www.npmjs.com/package/@fleur/next) [![travis](https://travis-ci.org/fleur-js/fleur.svg?branch=master)](https://travis-ci.org/fleur-js/fleur) ![minifiedgzip](https://badgen.net/bundlephobia/minzip/@fleur/next)

Fleur Next.js helpers
npm package: @fleur/react
Description: `@fleur/fleur` connector for React. (See [`@fleur/fleur`](https://www.npmjs.com/package/@fleur/fleur) for basic usage.)
Author: ragg
Latest version: 5.0.3

# 🌼 @fleur/react ⚛️ [![npm version](https://badge.fury.io/js/%40fleur%2Freact.svg)](https://www.npmjs.com/package/@fleur/react) [![travis](https://travis-ci.org/fleur-js/fleur.svg?branch=master)](https://travis-ci.org/fleur-js/fleur) ![minifiedgzip](https://badgen.net/bundlephobia/minzip/@fleur/react)

`@fleur/fleur` connector for React.
(See [`@fleur/fleur`](https://www.npmjs.com/package/@fleur/fleur) for basic usage.)

## Example

```tsx
// bootstrap
import Fleur from '@fleur/fleur'
import { FleurContext } from '@fleur/react'
import AppRoot from './components/AppRoot'
import CountStore from './stores/CountStore'

const app = new Fleur({ stores: [ CountStore ] })

const context = app.createContext()
ReactDOM.render(<FleurContext value={context}><AppRoot /></FluerContext>, {})
```

Hooks style:

```tsx
// ./components/AppRoot.tsx
import React, { useCallback } from 'react'
import { useFleurContext, useStore } from '@fleur/react'
import { increaseOp } from './operations'

export const AppRoot = props => {
  const context = useFleurContext()

  const { count } = useStore(getStore => ({
    count: getStore(CountStore).getCount(),
  }))

  const handleCountClick = useCallback(() => {
    context.executeOperation(increaseOp)
  }, [])

  return <div onClick={handleCountClick}>{count}</div>
}
```

Class style:

```tsx
// ./components/AppRoot.tsx

import React from 'react'

import {
  createElementWithContext,
  connectToStores,
  withFleurContext,
} from '@fleur/react'
import { increaseOp } from './operations'
import CountStore from './stores/CountStore'

export default withFleurContext(
  // pick Props from Store with `connectToStores()`
  connectToStores(getStore => ({
    count: getStore(CountStore).getCount(),
  }))(
    class AppRoot extends React.PureComponent {
      private handleCountClick = () => {
        // ** `this.props.{executeOperation, getStore}` provide by `withFleurContext()`
        this.props.executeOperation(increaseOp)
      }

      render() {
        return <div onClick={this.handleCountClick}>{this.props.count}</div>
      }
    },
  ),
)
```
npm package: @fleur/test-utils
Description: Test utils for fleurs
Author: Ragg
Latest version: 1.1.0
Deprecated: this package is deprecated, use `@fleur/testing` instead

# 🌼 fleur-test 🌼 [![npm version](https://badge.fury.io/js/%40fleur%2Ftest-utils.svg)](https://www.npmjs.com/package/@fleur/test-utils) [![travis](https://travis-ci.org/ra-gg/fleur.svg?branch=master)](https://travis-ci.org/ra-gg/fleur)

Test utils for fleurs

## Example

See [this spec](./src/mockOperationContext.spec.ts)
npm package: @fleur/testing
Description: Test helpers for @fleur/fleur
Author: Ragg
Latest version: 4.2.0

# 🌼 @fleur/testing 🌼 [![npm version](https://badge.fury.io/js/%40fleur%2Ftesting.svg)](https://www.npmjs.com/package/@fleur/testing) [![travis](https://travis-ci.org/fleur-js/fleur.svg?branch=master)](https://travis-ci.org/fleur-js/fleur)

Test helpers for @fleur/fleur

## Example

See [this spec](https://github.com/fleur-js/fleur/blob/master/packages/testing/src/index.spec.tsx)
npm package: @fleury/animation
Description: ## Installation
Author: Luiz Coke Neto
Latest version: 0.0.4

# animation

## Installation

To install this library, run:

```bash
$ npm install animation --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install animation
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { SampleModule } from 'animation';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Luiz Coke Neto](mailto:luiz.coke.neto@avanade.com)
npm package: @fleury/questionario
Description: To install this library, run:
Author: Grupo Fleury
Latest version: 0.4.71

# @fleury/questionario

## Installation

To install this library, run:

```bash
$ npm install @fleury/questionario --save
```

and then from Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import library
import { NgQuestionarioModule } from '@fleury/questionario';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify module
    NgQuestionarioModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<fl-questionario></fl-questionario>
<fl-questionario-secoes [submitted]="submitted" [questionario]='questionario'></fl-questionario-secoes>
<fl-questionario-steps-progress [atual]='etapaAtual' [maximo]='secoes'></fl-questionario-steps-progress>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```