open-index/open-npm huggingface dataset:
npm package: @sdkfabric/airtable
Description: Airtable JavaScript SDK managed by SDK Fabric
Latest version: 0.4.2


# Airtable SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Airtable](https://app.typehub.cloud/d/sdkfabric/airtable)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/airtable
npm package: @sdkfabric/discord
Description: Discord JavaScript SDK managed by SDK Fabric
Latest version: 0.2.11


# Discord SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Discord](https://app.typehub.cloud/d/sdkfabric/discord)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/discord
npm package: @sdkfabric/notion
Description: Notion JavaScript SDK managed by SDK Fabric
Latest version: 0.1.5


# Notion SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Notion](https://app.typehub.cloud/d/sdkfabric/notion)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/notion
npm package: @sdkfabric/openai
Description: Openai JavaScript SDK managed by SDK Fabric
Latest version: 0.1.1


# Openai SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Openai](https://app.typehub.cloud/d/sdkfabric/openai)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/openai
npm package: @sdkfabric/starwars
Description: Starwars JavaScript SDK managed by SDK Fabric
Latest version: 0.1.8


# Starwars SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Starwars](https://app.typehub.cloud/d/sdkfabric/starwars)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/starwars
npm package: @sdkfabric/twitter
Description: Twitter JavaScript SDK managed by SDK Fabric
Latest version: 3.0.9


# Twitter SDK

This SDK is managed by the [SDK Fabric](https://sdk-fabric.org/) project.
Our goal is to build a global infrastructure to automatically generate
an SDK for every API, please take a look at our website for more information.

## Contribution

Please do not create a pull requests at this repository since the code is
automatically generated. If an operation or type is missing at the client SDK
please register at the [TypeHub](https://typehub.cloud/) platform and create
a pull request at the [Twitter](https://app.typehub.cloud/d/sdkfabric/twitter)
specification. The system will then automatically create a GIT commit and update
the code.

## Usage

The following example shows how you initialize the client:

```typescript
const client = Client::build('[access_token]');

// @TODO use the client
```

You can find all available operations and types at:
https://app.typehub.cloud/d/sdkfabric/twitter
npm package: @sdkforge/angular
Description: The official native Angular HttpClient adapter plugin for **SDKForge**.
Latest version: 0.1.6

# @sdkforge/angular

The official native Angular HttpClient adapter plugin for **SDKForge**. 

Automatically maps compiled Clean Architecture services into strongly-typed injectable Angular RxJS Services precisely targeting module scopes.

## Installation
```bash
npm install -D @sdkforge/cli @sdkforge/angular
```

## Usage
```bash
npx @sdkforge/cli generate -i api.json -o src/api --plugin angular
```
npm package: @sdkforge/cli
Description: The official CLI runtime for the **SDKForge** enterprise SDK compiler.
Latest version: 0.1.6

# @sdkforge/cli

The official CLI runtime for the **SDKForge** enterprise SDK compiler. 

Translates OpenAPI and Postman contracts into native clean architecture frontend and backend layers!

## Quick Start
```bash
npx @sdkforge/cli init
npx @sdkforge/cli generate -i ./openapi.yaml -o ./src/api --plugin react
```
npm package: @sdkforge/core
Description: The core abstract parsing engine for the **SDKForge** enterprise SDK compiler.
Latest version: 0.1.6

# @sdkforge/core

The core abstract parsing engine for the **SDKForge** enterprise SDK compiler. 

This package is framework-agnostic. It parses OpenAPI and Postman schemas into structurally perfect Typescript definitions.

## Installation
You generally do not need to install this directly unless building custom plugins. Use the main CLI!

```bash
npx @sdkforge/cli init
```
npm package: @sdkforge/nest
Description: The official NestJS framework adapter plugin for **SDKForge**.
Latest version: 0.1.6

# @sdkforge/nest

The official NestJS framework adapter plugin for **SDKForge**. 

Maps standard schema DTO interfaces directly into Class-validator NestJS controller bindings reducing enormous boilerplate instantly!

## Installation
```bash
npm install -D @sdkforge/cli @sdkforge/nest
```

## Usage
```bash
npx @sdkforge/cli generate -i api.json -o src/api --plugin nest
```
npm package: @sdkforge/react
Description: The official native React-Query adapter plugin for **SDKForge**.
Latest version: 0.1.6

# @sdkforge/react

The official native React-Query adapter plugin for **SDKForge**. 

Automatically maps compiled SDKForge Clean Architecture services into robust `useQuery` and `useMutation` hooks.

## Installation
```bash
npm install -D @sdkforge/cli @sdkforge/react
```

## Usage
Simply pass this plugin locally utilizing the compiler:

```bash
npx @sdkforge/cli generate -i api.json -o src/api --plugin react
```
npm package: @sdkforge/runtime
Description: Runtime utilities for sdkforge-generated SDKs
Latest version: 0.1.6

# @sdkforge/runtime

Runtime utilities and shared types for sdkforge-generated SDKs.

## Install

```bash
npm install @sdkforge/runtime
```

## Usage

```ts
import { Result, isSuccess, isError } from '@sdkforge/runtime';
```
npm package: @sdkforge/swr
Description: The official native Vercal SWR adapter plugin for **SDKForge**.
Latest version: 0.1.6

# @sdkforge/swr

The official native Vercal SWR adapter plugin for **SDKForge**. 

Automatically maps compiled SDKForge Clean Architecture services into perfectly typed `useSWR` hooks handling data mutation natively.

## Installation
```bash
npm install -D @sdkforge/cli @sdkforge/swr
```

## Usage
```bash
npx @sdkforge/cli generate -i api.json -o src/api --plugin swr
```
npm package: @sdkforge/vue
Description: The official native Vue 3 adapter plugin for **SDKForge**.
Latest version: 0.1.6

# @sdkforge/vue

The official native Vue 3 adapter plugin for **SDKForge**. 

Automatically handles reactivity natively building composable mappings tied to perfectly constructed Clean Architecture hooks securely typed.

## Installation
```bash
npm install -D @sdkforge/cli @sdkforge/vue
```

## Usage
```bash
npx @sdkforge/cli generate -i api.json -o src/api --plugin vue
```
npm package: @sdkrouter/aisphere
Description: Audio-reactive liquid orb 3D component for AI interfaces
Author: CMDOP
Latest version: 0.1.29

# @sdkrouter/aisphere

Audio-reactive 3D liquid orb + voice conversation UI for AI interfaces.

## Install

```bash
npm install @sdkrouter/aisphere
```

Peer dependencies: `react`, `react-dom`, `three`, `@react-three/fiber`, `@react-three/drei`

## How it works

The package has two entry points:

- **`@sdkrouter/aisphere`** — core components: liquid orb, speech hooks, event system
- **`@sdkrouter/aisphere/dashboard`** — ready-to-use dashboard UI with orb, config panel, conversation controls

### Core: Liquid Orb

A WebGL sphere with simplex noise displacement, matcap + Fresnel shading, and real-time audio reactivity via WebAudio API. Four visual modes — `idle`, `listening`, `thinking`, `speaking` — smoothly transition between preset configurations.

```tsx
import { LiquidOrb } from '@sdkrouter/aisphere';

// Static
<LiquidOrb size={400} mode="idle" />

// Audio-reactive
<LiquidOrb size={400} mode="speaking" audioSource={audioElement} />
```

### Core: Voice Conversation

`useConversation` manages the full voice pipeline: record user speech (STT) → send to LLM → play response (TTS). Phases cycle automatically: `idle` → `listening` → `thinking` → `speaking` → `idle`.

```tsx
import { useConversation, LiquidOrbProvider, LiquidOrb, useLiquidOrb } from '@sdkrouter/aisphere';
import { SDKRouterClient } from '@sdkrouter/client';

const client = new SDKRouterClient({ apiKey: '...' });

function App() {
  const { setMode } = useLiquidOrb();
  const { phase, toggle, messages } = useConversation({
    client,
    voice: 'nova',
    llmModel: '@standard',
    systemPrompt: 'You are a helpful assistant.',
    onPhaseChange: (phase) => setMode(phase),
  });

  return (
    <>
      <LiquidOrb size={400} />
      <button onClick={toggle}>{phase}</button>
    </>
  );
}
```

### Dashboard (separate entry point)

Pre-built dashboard with orb visualization, config panel, TTS/STT controls, and conversation UI. Requires `@djangocfg/ui-core` and `lucide-react`.

```tsx
import { SDKRouterClient } from '@sdkrouter/client';
import { DashboardApp } from '@sdkrouter/aisphere/dashboard';

const client = new SDKRouterClient({ apiKey: '...' });

<DashboardApp client={client} />
```

### Event System

Cross-component communication via typed event emitter. Wrap your app in `AISphereEventsProvider` and use `useAISphereEvent` / `useAISphereEmitter` to subscribe and emit.

```tsx
import { AISphereEventsProvider, useAISphereEvent } from '@sdkrouter/aisphere';

function Listener() {
  useAISphereEvent('phaseChange', (phase) => console.log(phase));
  return null;
}
```

## License

MIT
npm package: @sdkrouter/api
Description: SDKRouter API Client — all REST endpoints, typed, lazy-loaded
Author: CMDOP
Latest version: 0.1.4

# @sdkrouter/api

TypeScript client for SDKRouter REST API. All endpoints, typed, lazy-loaded.

## Install

```bash
npm install @sdkrouter/api
```

## Quick Start

```ts
import { SDKRouterAPI } from '@sdkrouter/api';

const api = new SDKRouterAPI({ apiKey: 'sk_live_...' });

// Tools
await api.research.search_create({ query: 'AI news' });
await api.vision.image_analyze({ url: '...' });
await api.cdn.files_list();

// Business
await api.newsletter.newsletters_list();
await api.leads.submit_create('my-project', { name: 'John', email: 'j@x.com' });
await api.support.tickets_create({ subject: 'Help', message: 'Question' });

// Dev mode (localhost:8000)
const dev = new SDKRouterAPI({ apiKey: 'sk_live_...', dev: true });
```

## Config

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `apiKey` | `string` | required | SDK API key (`sk_live_...`) |
| `dev` | `boolean` | `false` | Use `localhost:8000` instead of `api.sdkrouter.com` |
| `apiUrl` | `string` | auto | Override API URL (rare) |

## Endpoints

All lazy-loaded — only initialized when first accessed.

### Tools

| Property | Description |
|----------|-------------|
| `api.vision` | Image analysis, OCR |
| `api.cdn` | File upload and storage |
| `api.research` | Web search + research pipeline |
| `api.shortlinks` | URL shortening |
| `api.llmModels` | LLM model listing |
| `api.keys` | SDK API key management |
| `api.cleaner` | HTML cleaner |
| `api.imageGen` | AI image generation |
| `api.crawler` | Web page crawling |

### Business

| Property | Description |
|----------|-------------|
| `api.newsletter` | Newsletters, campaigns, subscriptions |
| `api.leads` | Lead management + public form submission |
| `api.support` | Support tickets + messages |
| `api.payments` | Crypto payment processing |
| `api.emailGateway` | Email sending via SMTP |
| `api.exchanges` | Exchange account management |

### Knowledge

| Property | Description |
|----------|-------------|
| `api.knowbase` | Knowledge base projects, documents, search |
| `api.knowbaseChat` | KB chat sessions and messages |

### Integrations

| Property | Description |
|----------|-------------|
| `api.telegram` | Telegram bot proxy + MTProto accounts |
| `api.proxies` | Proxy management and rotation |

## Types

All generated types are re-exported:

```ts
import { NewsletterTypes, LeadsTypes, ResearchTypes } from '@sdkrouter/api';

const newsletter: NewsletterTypes.NewsletterDetail = ...;
const lead: LeadsTypes.LeadDetail = ...;
```
npm package: @sdkwa/create-tg-app
Description: Automated tool for creating Telegram applications without a web interface
Author: sdkwa
Latest version: 0.0.5

# create-tg-app

[![CI](https://github.com/sdkwa/create-tg-app/actions/workflows/ci.yml/badge.svg)](https://github.com/sdkwa/create-tg-app/actions/workflows/ci.yml)
[![NPM Version](https://img.shields.io/npm/v/@sdkwa/create-tg-app)](https://www.npmjs.com/package/@sdkwa/create-tg-app)
[![NPM Downloads](https://img.shields.io/npm/dm/@sdkwa/create-tg-app)](https://www.npmjs.com/package/@sdkwa/create-tg-app)
[![License](https://img.shields.io/npm/l/@sdkwa/create-tg-app)](https://github.com/sdkwa/create-tg-app/blob/main/LICENSE)
[![GitHub Release](https://img.shields.io/github/v/release/sdkwa/create-tg-app)](https://github.com/sdkwa/create-tg-app/releases)

> 🌟 **Try it free on the cloud!** Instead of setting up this library locally, you can use our free cloud service at [https://sdkwa.pro](https://sdkwa.pro) to create Telegram applications without any installation or configuration required.

Automated tool for creating Telegram applications without a web interface. Simplifies the process of generating Telegram apps by providing a straightforward API.

## Installation

```bash
npm install @sdkwa/create-tg-app
```

## Quick Start

### 1. Import and create client
```javascript
import { TelegramAppClient } from '@sdkwa/create-tg-app';
import https from 'https';
import { HttpsProxyAgent } from 'https-proxy-agent';

// Basic usage
const client = new TelegramAppClient();

// With proxy
const proxyAgent = new HttpsProxyAgent('http://proxy-user:proxy-password@proxy-host:proxy-port');
const clientWithProxy = new TelegramAppClient({
    httpsAgent: proxyAgent
});

// Or with custom HTTPS agent
const customAgent = new https.Agent({
    keepAlive: true,
    maxSockets: 10,
    rejectUnauthorized: false // Use with caution!
});
const clientWithCustomAgent = new TelegramAppClient({
    httpsAgent: customAgent
});
```

### 2. Send confirmation code
```javascript
const random_hash = await client.sendConfirmationCode('+1234567890');
```

### 3. Sign in with SMS code
```javascript
const token = await client.signIn({
  phone: '+1234567890',
  code: 'zk1bhHJ1', // SMS code received
  random_hash: random_hash // From previous step
});
```

### 4. Create Telegram app
```javascript
await client.createApp(token, {
  app_title: 'MyApp',
  app_dsc: 'My Telegram Application',
  app_url: 'https://myapp.com',
  app_platform: 'android',
  app_shortname: 'myapp'
});
```

### 5. Get app credentials
```javascript
const { apiId, apiHash } = await client.getCredentials(token);

console.log(`API ID: ${apiId}, API HASH: ${apiHash}`);
```
## License
MIT
npm package: @sdkwork/sdk-common
Description: SDKwork SDK Common - High cohesion, low coupling SDK foundation library
Author: SDKwork
Latest version: 1.0.2

# @sdkwork/sdk-common

Common foundation package for generated TypeScript SDKs.

## Install

```bash
npm install @sdkwork/sdk-common
```

## Authentication Modes

Choose one mode per client instance.

1. API Key mode
- `Authorization: Bearer {apiKey}`

2. Dual-token mode
- `Access-Token: {accessToken}`
- `Authorization: Bearer {authToken}`

## Quick Start

```typescript
import { createBaseHttpClient, createTokenManager } from '@sdkwork/sdk-common';

const tokenManager = createTokenManager({
  accessToken: 'your-access-token',
  authToken: 'your-auth-token',
});

const client = createBaseHttpClient({
  baseUrl: 'https://api.example.com',
  tokenManager,
});

const profile = await client.get<{ id: string; name: string }>('/v1/profile');
console.log(profile.name);
```

API key mode example:

```typescript
import { createBaseHttpClient } from '@sdkwork/sdk-common';

const client = createBaseHttpClient({
  baseUrl: 'https://api.example.com',
  apiKey: 'your-api-key',
});
```

## Exported Modules

- `core`: request/result types, constants, retry/cache/logger config types
- `auth`: token manager and auth header builder
- `http`: `BaseHttpClient` and `createBaseHttpClient`
- `errors`: SDK error hierarchy and type guards
- `utils`: retry, cache, logger, string/encoding/date/object helpers


## Publishing

This SDK includes cross-platform publish scripts in `bin/`:
- `bin/publish-core.mjs`
- `bin/publish.sh`
- `bin/publish.ps1`

### Check

```bash
./bin/publish.sh --action check
```

### Publish

```bash
./bin/publish.sh --action publish --channel release
```

```powershell
.\bin\publish.ps1 --action publish --channel test --dry-run
```

> Set `NPM_TOKEN` (and optional `NPM_REGISTRY_URL`) before release publish.

## License

MIT
npm package: @sdl-codegen/node
Description: GraphQL .d.ts file generation for SDL-first projects
Author: Orta Therox
Latest version: 3.0.4

<h1 align="center">SDL-Codegen</h1>

<p align="center">GraphQL .d.ts file generation for SDL-first projects</p>

This project is for creating the `.d.ts` files for codebases where you have SDL like:

```graphql
export const schema = gql`
    type Game {
        id: ID!
        homeTeamID: Int!
        awayTeamID: Int!
        homeTeamScore: Int!
        awayTeamScore: Int!
    }

    type Query {
        games: [Game!]! @skipAuth
        upcomingGames: [Game!]! @skipAuth
        game(id: ID!): Game @requireAuth
    }
`
```

Then separately, you write functions like:

```ts
export const games = () => db.game.findMany({ orderBy: { startDateTime: "asc" } })

export const upcomingGames = () => db.game.findMany({ isCompleted: false, startDateTime: { gt: new Date() } })

export const game = ({ id }) => db.game.findUnique({ where: { id } })
```

This repo will create `.d.ts` files which very accurately, and very concisely represent the runtime for these functions. It's goal is to take all of the possible logic which might happen in the TypeScript type system, and pre-bake that into the output of the .d.ts files.

You could think of it as a smaller, more singular focused version of the mature and well-featured [graphql-codgen](https://the-guild.dev/graphql/codegen).

## Vision

This repo provides the APIs for building a codegen for framework authors or confident tool builders, and the goal is not to provide a CLI for a generalized use-case.

## Pipeline

This app is architected as a pipeline of sorts. Here's the rough stages:

- Get inputs: GraphQL schema, the source files to represent, Prisma dmmf and dts output config
- Parse inputs: Parse the GraphQL schema, parse source files into facts about the code, parse the Prisma dmmf
- Centralize data: Keep a central store of all of these things, and have specific updaters so that a watcher can be built.
- Generate outputs: Generate .d.ts files for the files we want to generate them for

It's still a bit of a work in progress to have these discrete steps, but it's getting there.

## Development

See [`.github/CONTRIBUTING.md`](./.github/CONTRIBUTING.md), then [`.github/DEVELOPMENT.md`](./.github/DEVELOPMENT.md).

Thanks!

## Deployment

Make a commit like: `git commit --allow-empty -m "feat: Prepare for release"`
npm package: @sdl-web/sdl-data
Description: A Basic Data Provider that provides data to the elements in the default slot.  It also throws an event 'sdl-data-ready' when the data has been successfully received
Author: Marty Israelsen
Latest version: 1.0.1

# \<sdl-data\>

A Generic Data Provider to elements that are placed into the default slot of this element.   Also, an event 'sdl-data-ready' is also thrown to those who are listening and want it as well.  


## Download from npm using yarn into your node_modules directory
```
$ yarn upgrade
$ yarn add @sdl-web/sdl-data --flat
```

##  Run the es6 version of the Demo (Assuming you installed at SERVER_ROOT using npm)
```
{SERVER_ROOT}/node_modules/@sdl-web/sdl-data/build-demo/es6-bundled/demo/index.html
```

##  Include sdl-data-loader.js to use as stand-alone bundled component 
or 
##  Include sdl-data.js directly if including in a polymer project. 
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>sdl-data demo</title>

    <!-- If using in an existing polymer project:  use sdl-srch-bar.js directly-->
    <script type="import" src="@sdl-web/sdl-data/src/components/sdl-data.js"></script> 

    <!-- Now add sdl-data to html section -->
    <sdl-data name="combo1-data" id='combo1-data' url='./data/srch-data.txt' name="names">  
        <vaadin-combo-box name="combo1" item-label-path="name" item-value-path="_id" label="Name"></vaadin-combo-box>
    </sdl-data>


    <!-- Finally, listen for change event -->
    <!-- <script>
        $('document').ready(function(){

          var combo1 = document.querySelector('#combo1-data');
          combo1.addEventListener("sdl-data-ready", function(e) {
            console.log("NAME=",e.detail.name);
            console.log("PAYLOAD",e.detail.payload);
          }, false);

        });
    </script> -->

    </script>
  </body>
</html>

```
npm package: @sdl-web/sdl-dialog
Description: Simple Dialog
Author: Marty Israelsen
Latest version: 1.0.0

# \<sdl-dialog\>

Simple Dialog Window Element



## Download from npm using yarn into your node_modules directory
```
$ yarn upgrade
$ yarn add @sdl-web/sdl-dialog
```

```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>sdl-dialog demo</title>

    <!-- If using in an existing polymer project:  use sdl-dialog.js directly-->
    <script type="import" src="@sdl-web/sdl-dialog/src/components/sdl-dialog.js"></script> 

    <!-- Now add sdl-dialog to html section -->
    <sdl-dialog id='srch-bar1' opened="true">  

        <!-- Put whatever input fields (and styling) you want into this slot -->
      <form>
        <paper-input name="input1" label="Filter Search">
          <iron-icon icon="search" id="srch-icon" slot="prefix"></iron-icon>
        </paper-input>
      </form>
      
    </sdl-dialog>

  </body>
</html>

```
npm package: @sdl-web/sdl-multi-combo
Description:  This html multi combo wraps any select component that takes an items array.  Important functionality for combos includes: 1.  Given a 'url' it will fetch the data for you (from the server) and insert it into the 'items' array of the combo in the slot.  2
Author: Marty Israelsen
Latest version: 1.0.6

\<sdl-multi-combo\>
A Multi-Select combo custom element that wraps your favorite combo component.

 Important functionality for combos includes:
 1.  Given a 'url' it will fetch the data for you (from the server) and insert it into the 'items' array of the combo in the slot.
 2.  If multiselect is specified it will use the combo box in the slot to allow multiple selections and put them
        into pills below the combo input.


## Download from npm using yarn into your node_modules directory
```
$ yarn upgrade
$ yarn add @sdl-web/sdl-multi-combo --flat
```

##  Run the es6 version of the Demo (Assuming you installed at SERVER_ROOT using npm)
```
{SERVER_ROOT}/node_modules/@sdl-web/sdl-multi-combo/build-demo/es6-bundled/demo/index.html
```

##  Include sdl-data-loader.js to use as stand-alone bundled component 
or 
##  Include sdl-data.js directly if including in a polymer project. 
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>sdl-multi-combo demo</title>

    <!-- If using in an existing polymer project:  use sdl-srch-bar.js directly-->
    <script type="import" src="@sdl-web/sdl-multi-combo/src/components/sdl-data.js"></script> 

    <!-- Now add sdl-data to html section -->
    <sdl-multi-combo name="combo1-data" id='combo1-data' url='./data/srch-data.txt'>  
        <vaadin-combo-box name="combo1" item-label-path="name" item-value-path="_id" label="Name"></vaadin-combo-box>
    </sdl-multi-combo>


    <!-- Finally, listen for change event -->
    <!-- <script>
        $('document').ready(function(){

          var combo1 = document.querySelector('#combo1-data');
          combo1.addEventListener("sdl-data-ready", function(e) {
            console.log("NAME=",e.detail.name);
            console.log("PAYLOAD",e.detail.payload);
          }, false);

        });
    </script> -->

    </script>
  </body>
</html>

```
npm package: @sdl-web/sdl-srch-bar
Description: Advanced Search Bar Element
Author: Marty Israelsen
Latest version: 1.0.27

# \<sdl-srch-bar\>

Advanced Search Bar Element that throws "change" event for each key stroke .   

If you specify "ajaxUrl" it will handle the ajax for you and only throw it's change event when the ajax has returned - the payload is found in e.detail.payload.  

If you do NOT specify "ajaxUrl" then it will throw the "change" event after each key stroke and return to you the form data in e.detail.formData.   

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `yarn upgrade` to install your element's dependencies, then run `polymer serve` to serve your element locally.


## Download from npm using yarn into your node_modules directory
```
$ yarn upgrade
$ yarn add @sdl-web/sdl-srch-bar 
```

## Viewing Your Element In Development Mode

```
$ cd node_modules/sdl-srch-bar
$ polymer serve
```


## Build the sdl-srch-bar demo & component
```
$ cd node_modules/sdl-srch-bar
$ ./sdlMake 
```

Once you run this build there will be two build directories created:  build-demo & build-component


##  Run the es6 version of the Demo (Assuming you installed at SERVER_ROOT using npm)
```
{SERVER_ROOT}/node_modules/@sdl-web/sdl-srch-bar/build-demo/es6-bundled/demo/index.html
```

##  Include sdl-srch-bar-loader.js to use as stand-alone bundled component 
or 
##  Include sdl-srch-bar.js directly if including in a polymer project. 
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>sdl-srch-bar demo</title>
     <!-- If using as a stand-alone-component:  use sdl-srch-bar-loader.js
    <script src="./node_modules/@sdl-web/sdl-srch-bar/build-component/sdl-srch-bar-loader.js"></script> -->

    <!-- If using in an existing polymer project:  use sdl-srch-bar.js directly-->
    <script type="import" src="@sdl-web/sdl-srch-bar/src/components/sdl-srch-bar.js"></script> 

    <!-- Now add sdl-srch-bar to html section -->
    <sdl-srch-bar id='srch-bar1' ajaxUrl='./data/srch-data.txt'>  

        <!-- Put whatever input fields (and styling) you want into this slot -->
      <form>
        <paper-input name="input1" label="Filter Search">
          <iron-icon icon="search" id="srch-icon" slot="prefix"></iron-icon>
        </paper-input>
      </form>
      
    </sdl-srch-bar>


    <!-- Finally, listen for change event -->
    <!-- <script>
        $('document').ready(function(){

          var srch1 = document.querySelector('#srch-bar1');
          srch1.addEventListener("changed", function(e) {
            // Do something with the e.detail.payload here if you specified ajaxUrl...
            // or 
            // Do something with the e.detail.formData here if you did not specify ajaxUrl...
          }, false);

        });
    </script> -->

    </script>
  </body>
</html>

```
npm package: @sdl-web/sdl-srch-grid
Description: Advanced Search Grid
Author: Marty Israelsen
Latest version: 1.0.25

# \<sdl-srch-grid\>

Generic Search Grid Element.  

If you specify "ajaxUrl" it will handle the ajax for you and only throw it's change event when the ajax has returned - the payload is found in e.detail.payload.  

If you do NOT specify "ajaxUrl" then it will throw the "change" event after each key stroke and return to you the form data in e.detail.formData.   

##  Run the es6 version of the Demo (Assuming you installed at SERVER_ROOT using npm)
```
{SERVER_ROOT}/node_modules/@sdl-web/sdl-srch-bar/build-demo/es6-bundled/demo/index.html
```

##  Include sdl-srch-bar-loader.js to use as stand-alone bundled component 
or 
##  Include sdl-srch-bar.js directly if including in a polymer project. 
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>sdl-srch-bar demo</title>
     <!-- If using as a stand-alone-component:  use sdl-srch-bar-loader.js
    <script src="./node_modules/@sdl-web/sdl-srch-bar/build-component/sdl-srch-bar-loader.js"></script> -->

    <!-- If using in an existing polymer project:  use sdl-srch-bar.js directly-->
    <script type="import" src="@sdl-web/sdl-srch-bar/src/components/sdl-srch-bar.js"></script> 

    <!-- Now add sdl-srch-bar to html section -->
    <sdl-srch-bar id='srch-bar1' ajaxUrl='./data/srch-data.txt'>  

        <!-- Put whatever input fields (and styling) you want into this slot -->
      <form>
        <paper-input name="input1" label="Filter Search">
          <iron-icon icon="search" id="srch-icon" slot="prefix"></iron-icon>
        </paper-input>
      </form>
      
    </sdl-srch-bar>


    <!-- Finally, listen for change event -->
    <!-- <script>
        $('document').ready(function(){

          var srch1 = document.querySelector('#srch-bar1');
          srch1.addEventListener("changed", function(e) {
            // Do something with the e.detail.payload here if you specified ajaxUrl...
            // or 
            // Do something with the e.detail.formData here if you did not specify ajaxUrl...
          }, false);

        });
    </script> -->

    </script>
  </body>
</html>

```