open-index/open-npm huggingface dataset:
npm package: @flaviosantoro92/ngx-datatable
Description: ngx-datatable fork with updated dependencies.
Author: Flavio Santoro
Latest version: 1.0.2

# ngx-datatable

[![Join the chat at https://gitter.im/swimlane/ngx-datatable](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/swimlane/ngx-datatable?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Code Climate](https://codeclimate.com/github/swimlane/ngx-datatable/badges/gpa.svg)](https://codeclimate.com/github/swimlane/ngx-datatable)
[![Test Coverage](https://codeclimate.com/github/swimlane/ngx-datatable/badges/coverage.svg)](https://codeclimate.com/github/swimlane/ngx-datatable/coverage)
[![npm version](https://badge.fury.io/js/%40swimlane%2Fngx-datatable.svg)](https://badge.fury.io/js/%40swimlane%2Fngx-datatable)
[![npm downloads](https://img.shields.io/npm/dm/@swimlane/ngx-datatable.svg)](https://npmjs.org/@swimlane/ngx-datatable)

`ngx-datatable` is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with _no external dependencies_. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it.

It was built for modern browsers using _TypeScript, CSS3 and HTML5_ and Angular `8.0.0`. This is the sister project of the [angular-data-table](https://github.com/swimlane/angular-data-table) that is designed for Angular 1.x.

Check out the [documentation](https://swimlane.gitbook.io/ngx-datatable/) & [demos](http://swimlane.github.io/ngx-datatable/) for more information!

See the [changelog](https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md) for recent changes.

## Features

- Handle large data sets ( Virtual DOM )
- Expressive Header and Cell Templates
- Horizontal & Vertical Scrolling
- Column Reordering & Resizing
- Client/Server side Pagination & Sorting
- Intelligent Column Width Algorithms ( Force-fill & Flex-grow )
- Integrated Pager
- Cell & Row Selection ( Single, Multi, Keyboard, Checkbox )
- Fixed AND Fluid height
- Left and Right Column Pinning
- Row Detail View
- Decoupled theme'ing with included Google Material theme
- Light codebase / No external dependencies
- AoT Compilation Support
- Universal Support

## Installation

To use ngx-datatable in your project install it via [npm](https://www.npmjs.com/package/@swimlane/ngx-datatable):

```
npm i @swimlane/ngx-datatable --save
```

## Credits

`ngx-datatable` is a [Swimlane](http://swimlane.com) open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

[SecOps Hub](http://secopshub.com) is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.
npm package: @flaviut/parcel-plugin-typescript
Description: Enhanced TypeScript support for Parcel bundler
Author: Fathy Boundjadj
Latest version: 1.0.1

# parcel-plugin-typescript

Enhanced TypeScript integration for Parcel.

![Screenshot](./.assets/screenshot.png)

## Differences with Parcel native support

While Parcel has built-in transpiling support for TypeScript, this plugin provides [additional features](#features).

If you only need transpiling then this plugin might not be necessary. You can see this plugin as a Parcel version of `awesome-typescript-loader` or `ts-loader`.

## Features

- Type checking:  
  Checking your TypeScript code for errors, in a separate process for speed.
- Path mappings:  
  Rewriting your `import` on the fly accordingly to your `paths` and `baseUrl` compiler options.
- Custom AST transformers:
  Use your own TypeScript transformers

### Upcoming features

- TSLint support

### Angular Support

Angular support has been moved to [`parcel-plugin-angular`](https://github.com/fathyb/parcel-plugin-angular).

## Installation

`yarn add parcel-plugin-typescript`

or

`npm install parcel-plugin-typescript`

## Configuration

For configuration, you can pass a `parcel-plugin-typescript` object in your `tsconfig.json`:
```js
{
  "compilerOptions": {...},
  // the plugin options
  "parcel-plugin-typescript": {
    // If true type-checking is disabled
    "transpileOnly": false
  }
}
```
npm package: @flavorly/v-calendar
Description: A clean and extendable plugin for building simple attributed calendars in Vue.js.
Author: Nathan Reyes
Latest version: 3.0.0-alpha.11

# VCalendar Plugin for Vue 3

A Vue plugin for for attributed calendars date pickers using Vue 3, Typescript and Rollup.

### Install Plugin

```shell
yarn add v-calendar@next
```

### Use Plugin

:warning: **As of `v3.0.0-alpha.7`, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.**

```js
import 'v-calendar/dist/style.css';
```

#### Method 1: Use Globally

```js
import VCalendar from 'v-calendar';

// Use plugin with defaults
app.use(VCalendar, {})
```

```html
<!-- Component.vue template -->
<template>
  <v-calendar />
  <v-date-picker v-model="date" />
</template>
```

### Method 2: Use Components Globally

```js
// main.js
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})
// Use the components
app.component('Calendar', Calendar)
app.component('DatePicker', DatePicker)
```

```html
<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date" />
</template>
```

### Method 3: Use Components As Needed

```js
// main.js
import { SetupCalendar } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})
```

```html
<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>
```

```js
// Component.vue script
import { Calendar, DatePicker } from 'v-calendar';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
```

## Source setup

Please follow below mentioned steps to clone and build this project:

### Clone the repo

```sh
git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar
```

### Install dependencies

```sh
yarn
```

### Switch to `/next` branch

```sh
git checkout next
```

### Build Library

```sh
# ES, CommonJS, IIFE and CSS
yarn build
```

### Lint and fix files

```sh
yarn lint
```
npm package: @flavormingo/parsley
Description: ultra lightweight zero dependency markdown parser
Author: flavormingo
Latest version: 1.0.2

# parsley

the prophecy foretold a markdown parser upon which all higher meaning depends..

zero dependencies, 2.1kb gzipped

```bash
npm i @flavormingo/parsley
```

> [!TIP]
> parsley is the backbone of the world's best gfm editor, [octowrite](https://github.com/flavormingo/octowrite)
npm package: @flavs/docdash
Description: lodash inspired docs with jsDoc symantics
Author: Flavio Espinoza
Latest version: 1.0.5

# docdash

A simple JSDoc to Markdown documentation generator.

## Install

yarn
```bash {.copy-clip}
yarn add @flavs/docdash
```

npm
```bash {.copy-clip}
npm i @flavs/docdash
```

## Usage

```js
var docdash = require('@flavs/docdash');

var markdown = docdash({
  'path': filepath,
  'url': 'https://github.com/username/project/blob/master/my.js'
});
```
npm package: @flavs/yup-yup
Description: Additional validation methods for the Yup validation npm module
Author: Flavio Espinoza
Latest version: 1.1.1

# yup-yup

> Additional validation methods for the [Yup](https://github.com/jquense/yup) validation npm module

[![Version](https://img.shields.io/npm/v/@flavs/yup-yup.svg?style=for-the-badge)](https://www.npmjs.com/package/@flavsy/yup-yup)

## Install

```bash
yarn add @flavs/yup-yup
```

### Usage
```js
import "@flavs/yup-yup";
import * as Yup from "yup";

const validationSchema = Yup.object().shape({

  // default Yup validator
  email: Yup.string()
    .email()
    .required("Required"),

  // new phone validator
  mobilePhone: Yup.string()
    .phone('phone number is not valid')
    .required("Required")

});
```
npm package: @flayyer/better-url
Description: Wrapper of `URL` class with additional formatting features.
Author: Patricio López Juri
Latest version: 1.0.1
Deprecated: WARNING: This project has been renamed to @flyyer/better-url. Install using @flyyer/better-url instead. https://npmjs.com/package/@flyyer/better-url

# @flayyer/better-url

> This is not efficient but is practical for our needs.

Wrapper of `URL` class with additional formatting features but it is not a drop-in replacement because it has non-standard construction.

**Implements the `URL` class definition but preserves `base`'s path and optionally queryparams when resolving URLs.**

```sh
yarn add @flayyer/better-url
```

We recommend using it in conjunction with https://github.com/sindresorhus/normalize-url

## Usage

```ts
import { BetterURL } from "@flayyer/better-url";

const url = new BetterURL("/subpath?q=bye&title=title", "https://example.com/path?q=hello&desc=desc", undefined, { keepBaseSearch: true });
console.log(url.format({ protocol: true, hostname: true, pathname: true, search: true }));
// https://example.com/path/subpath?q=bye&title=title&desc=desc

/** Compared to native URL class: */
const url = new URL("/subpath?q=bye&title=title", "https://example.com/path?q=hello&desc=desc");
console.log(url.href);
// 'https://example.com/subpath?q=bye&title=title
```
npm package: @flayyer/eslint-config
Description: ESLint rules for our projects.
Author: Patricio López Juri
Latest version: 1.1.3
Deprecated: WARNING: This project has been renamed to @flyyer/eslint-config. Install using @flyyer/eslint-config instead. https://npmjs.com/package/@flyyer/eslint-config

# @flayyer/eslint-config

Please use this configuration to maintain a common and homogeneous code base.

## Install

Install this package as any other package with:

```sh
yarn add --dev @flayyer/eslint-config eslint prettier
```

Create a `.eslintignore` and add any files that are bundled, builded and/or _transpiled_:

```txt
!.eslintrc.js

.vscode
.next
dist
public
node_modules
```

In the `package.json` file add the following in the `"scripts"` section:

```js
 {
   // ...
   "scripts": {
     // ...
     "lint": "eslint '*/**/*.{js,ts,tsx}'",
   },
 }
```

### Configure for Javascript

Create a `.eslintrc.js` file in the root of your project and add the following:

```js
// .eslintrc.js
module.exports = {
  extends: [
    "@flayyer/eslint-config",
    "@flayyer/eslint-config/jest",
    "@flayyer/eslint-config/prettier",
  ],
};
```

### Configure for Typescript

Create a `.eslintrc.js` file in the root of your project and add the following:

```js
// .eslintrc.js
module.exports = {
  extends: [
    "@flayyer/eslint-config",
    "@flayyer/eslint-config/typescript",
    "@flayyer/eslint-config/jest",
    "@flayyer/eslint-config/prettier",
  ],
};
```

### Configure for React + Typescript

Create a `.eslintrc.js` file in the root of your project and add the following:

```js
// .eslintrc.js
module.exports = {
  extends: [
    "@flayyer/eslint-config",
    "@flayyer/eslint-config/typescript",
    "@flayyer/eslint-config/react",
    "@flayyer/eslint-config/jest",
    "@flayyer/eslint-config/prettier",
  ],
};
```

## Usage

To lint the files run:

```sh
yarn lint
```

To lint the files and **auto-format** run:

```sh
yarn lint --fix
```

## Setup Visual Studio Code

Create file `.vscode/settings.json`

```sh
mkdir -p .vscode
touch .vscode/settings.json
```

Add the following:

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}
```

## Publishing

To make changes to this package run:

```sh
yarn link
yarn link '@flayyer/eslint-config'
```

To publish and update of this package run:

```sh
# git add ...
# git commit ...

git push --follow-tags
yarn publish --access=public
```

Unlink this package:

```sh
yarn unlink '@flayyer/eslint-config'
yarn unlink
```
npm package: @flayyer/ping
Description: Monitor and pre-render Flayyer URLs - Base browser logic
Author: Patricio López Juri
Latest version: 1.1.0

# @flayyer/ping

Monitor and pre-render Flayyer URLs - Base browser logic.

Zero dependency and lightweight script.

You probably don´t want to use this script directly. We recommend checking out the other sibling modules in this repository, those provide easier and better integrations.

## Credits

This code is heavily based on [simpleanalytics](https://simpleanalytics.com/)'s script. Here is their license:

```txt
MIT License

Copyright (c) 2018-2020 Simple Analytics

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
npm package: @flayyer/ping-module
Description: Monitor and pre-render Flayyer URLs - CommonJS compatible module
Author: Patricio López Juri
Latest version: 1.1.0

# @flayyer/ping-module

Monitor and pre-render Flayyer URLs - CommonJS compatible module

## Install

This module supports TypeScript and JavaScript.

```sh
npm install --save @flayyer/ping-module

# or with yarn:
yarn add @flayyer/ping-module
```

## Usage

### CommonJS import

**Note: this module is intended for browsers only.** We are working on a Node.js version.

```js
const ping = require("@flayyer/ping-module");

// Add this to your app initialization logic. Make sure to execute it only once.
ping();
```

### ES Import

```js
import ping from "@flayyer/ping-module";

// Add this to your app initialization logic. Make sure to execute it only once.
ping();
```
npm package: @flayyer/ping-react
Description: Monitor and pre-render Flayyer URLs - React component and hook
Author: Patricio López Juri
Latest version: 1.1.0

# @flayyer/ping-react

Monitor and pre-render Flayyer URLs - React component and hook.

This script will only work on pages where a `<meta>` tag is present and related to `og:image` or `twitter:image` and has for content a [Flayyer URL](https://flayyer.com?ref=github). In other cases this will result in a no-op.

## Install

This module supports TypeScript and JavaScript.

```sh
npm install --save @flayyer/ping-react

# or with yarn:
yarn add @flayyer/ping-react
```

## Usage

### React Hook

**We recommended using this library with React Hooks.**

Add this to public pages where you have a Flayyer URL in your `<meta>` tags for dynamic `og:images`.

```js
import { useFlayyerPing } from "@flayyer/ping-react";

function App() {
  useFlayyerPing();
  // ...
}
```

#### Next.js

> See https://nextjs.org/docs/advanced-features/custom-app

If you are using [Next.js](https://nextjs.org/) you probably want to add this hook to your `/pages/_app.js` file.

```js
// /pages/_app.js

import Head from "next/head";
import Flayyer from "@flayyer/flayyer";
import { useFlayyerPing } from "@flayyer/ping-react";

const flayyer = new Flayyer({
  tenant: "tenant",
  deck: "deck",
  template: "template",
  variables: {
    title: "Hello world!",
  },
});

function MyApp({ Component, pageProps }) {
  useFlayyerPing();

  return (
    <>
      <Head>
        <meta property="og:image" content={url} />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp
```

### React component

If you are not using React Hooks, you can active this script by mounting a `<FlayyerPing />` component. Make sure to mount it only one time per page.

The same rules described above applies here: this will only work on pages where you have a Flayyer URL in your `<meta>` tags for dynamic `og:images`. Ideally only on public pages.

This component has no effect on your DOM since it always renders `null`.

```js
import { FlayyerPing } from "@flayyer/ping-react";

function App() {
  return (
    <div>
      <FlayyerPing />
      // ...
    </div>
  )
}
```
npm package: @flayyer/ping-script
Description: Monitor and pre-render Flayyer URLs - Browser script
Author: Patricio López Juri
Latest version: 1.1.0

# @flayyer/ping-script

Monitor and pre-render Flayyer URLs - Browser script

This script will only work on pages where a `<meta>` tag is present and related to `og:image` or `twitter:image` and has for content a [Flayyer URL](https://flayyer.com?ref=github). In other cases this will result in a no-op.

## Install

> This script is hosted in npm and served through [unpkg.com](https://unpkg.com/)

Add this script inside and at the end of the `<body>` tag:

```html
<script async defer src="https://unpkg.com/@flayyer/ping-script/dist/ping.min.js"></script>
<noscript>
  <img src="https://edge.flayyer.com/v2/ping.gif" alt=""/>
</noscript>
```

So a fully-featured but also minimalist site using Flayyer should look like this:

```html
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
  <title>Example</title>
  <meta property="og:image" content="https://flayyer.host/v2/tenant/deck/template.jpeg?title=Example" />
</head>
<body>
  <h1>Example</h1>
  ...
  <script async defer src="https://unpkg.com/@flayyer/ping-script/dist/ping.min.js"></script>
  <noscript>
    <img src="https://edge.flayyer.com/v2/ping.gif" alt=""/>
  </noscript>
</body>
</html>
```

By using this script we are able to pre-render the image at `https://flayyer.host/v2/tenant/deck/template.jpeg?title=Example` and also keep track of outside visitors that may be interested in your link thanks to the preview we generated.

### Specific version

While `https://unpkg.com/@flayyer/ping-script/dist/ping.min.js` is going to grab the latest version of this script, you can opt to use a specific version using the syntax described in https://unpkg.com/

## Size

We care about performance and we don´t want to impact the loading speed of your website. This script has the following filesize and we are continuously working to add more features while reducing the size as much as possible.

```txt
┌───────────────────────────────┐
│                               │
│   Destination: dist/ping.js   │
│   Bundle Size:  9.33 KB       │
│   Minified Size:  3.24 KB     │
│   Gzipped Size:  1.67 KB      │
│                               │
└───────────────────────────────┘
┌───────────────────────────────────┐
│                                   │
│   Destination: dist/ping.min.js   │
│   Bundle Size:  3.16 KB           │
│   Minified Size:  3.16 KB         │
│   Gzipped Size:  1.68 KB          │
│                                   │
└───────────────────────────────────┘
```
npm package: @flayyer/proxy
Description: Helper function to proxy images via Flayyer network to bypass CORS
Author: Patricio López Juri
Latest version: 1.0.0
Deprecated: WARNING: This project has been renamed to @flyyer/proxy. Install using @flyyer/proxy instead. https://npmjs.com/package/@flyyer/proxy

# @flayyer/proxy

Helper function to proxy images via Flayyer network to bypass CORS with Typescript support.

We made this for [Flayyer.com](https://flayyer.com?ref=github) to enable developers to create content-aware marketing and social images. Beware this is intended to use inside Flayyer templates created with [`create-flayyer-app`](https://github.com/flayyer/create-flayyer-app).

**Note: This proxy service is only available and allowed for Flayyer templates where bypassing CORS is necessary for images or data.**

## Usage

Install this dependency:

```sh
yarn add @flayyer/proxy
```

Common case usage:

```tsx
import { proxy } from "@flayyer/proxy";

export default function MainTemplate({ variables }) {
  const src = proxy(variables["image"]);
  return <img src={src} />
}
```

### Smartcrop

![example image](https://github.com/flayyer/use-smartcrop/raw/main/.github/image.jpeg)

Usage with [`use-smartcrop`](https://github.com/flayyer/use-smartcrop).

```tsx
import { proxy } from "@flayyer/proxy";
import { useSmartcrop } from "use-smartcrop";

export default function MainTemplate({ width, height, variables }) {
  const src = proxy(variables["image"]);
  const cropped = useSmartcrop(src, { width, height, minScale: 1 })
  return <img src={cropped.src} />
}
```
npm package: @flayyer/stringify
Description: Just a wrapper around https://github.com/streamich/fastest-stable-stringify
Author: Patricio López Juri
Latest version: 0.1.1
Deprecated: WARNING: This project has been renamed to @flyyer/stringify. Install using @flyyer/stringify instead. https://npmjs.com/package/@flyyer/stringify

# @flayyer/stringify

Just a wrapper around https://github.com/streamich/fastest-stable-stringify but with Typescript typing we use in some projects.

```sh
yarn add @flayyer/stringify
```

All credits to https://github.com/streamich/fastest-stable-stringify
npm package: @flayyer/use-googlefonts
Description: React hook to dynamically load Google Fonts v2 during execution.
Author: Patricio López Juri
Latest version: 0.3.0
Deprecated: WARNING: This project has been renamed to @flyyer/use-googlefonts. Install using @flyyer/use-googlefonts instead. https://npmjs.com/package/@flyyer/use-googlefonts

# @flayyer/use-googlefonts

React hook to load Google Fonts v2 **when you can't define _a priori_ the expected font on the `<head />`.**

If you know what specific font you require on your project you should omit this library and insert the `<link />` tags directly in the `<head />` of your HTML via `react-helmet` or `next/head` if you are using Next.js.

We made this hook for [Flayyer.com](https://flayyer.com?ref=github) to enable developers to create templates with fonts _on the fly_ to match each user preferred font styling. Those tempates are used to create social and marketing images.

## Usage

Install this dependency:

```sh
yarn add @flayyer/use-googlefonts
```

Common case usage:

```tsx
import React from "react";
import { useGoogleFonts, GoogleFontsStatus } from "@flayyer/use-googlefonts";

function App() {
  const font = useGoogleFonts([
    {
      family: "Cabin", // Family Name
      styles: [
        "600..700", // Range, if family supports it.
        "100..200italic", // Range with italic
        "300italic", // Weight with italic
        "regular", // Shortcut to 400
        "italic", // Shortcut to 400 Italic
        "500", // Regular with weight
        444, // Regular weight for variable font
      ],
    },
    {
      family: "Roboto", // Family Name - Roboto doesn't support ranges
      styles: [
        "300italic", // Weight with italic
        "regular", // Shortcut to 400
        "italic", // Shortcut to 400 Italic
        "500",
        100,
      ],
    },
  ]);

  if (font.status === GoogleFontsStatus.FAILED) {
    console.log(font.error);
  }
  console.log(font.href);
  // https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto
  return (
    <p style={{ fontFamily: "'Cabin', sans-serif" }}>
      Almost before we knew it, we had left the ground.
    </p>
  );
}
```

To improve performance and speed it is recommended to add the following pre-connection tags in the `<head />` of your HTML.

```html
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  </head>
  <body>
    ...
  </body>
</html>
```