open-index/open-npm huggingface dataset:
npm package: @nnetworth/networth-meta
Description: Typescript interfaces and classes for Networth
Author: nghiattran
Latest version: 0.2.1

# Networth-Meta

> Base interfaces and classes for Networth app.

[![Build Status](https://travis-ci.org/nnetworth/networth-meta.svg?branch=master)](https://travis-ci.org/nnetworth/networth-meta)
[![Greenkeeper badge](https://badges.greenkeeper.io/nnetworth/networth-meta.svg)](https://greenkeeper.io/)
[![alt text](https://img.shields.io/badge/slack-channel-pink.svg "Slack")](https://join.slack.com/t/nnetworth/shared_invite/enQtMjQxNjU3NDQ2NzA0LTc2NzUwZmMzODQ5MjQzYTY0OGFiMjQ4YTYzYjJiMWE0Nzk3NWE2NjUyNzU1NTMyZTdhYTJiNjMwN2YyMjM3Mjg)
[![codecov](https://codecov.io/gh/nnetworth/networth-meta/branch/master/graph/badge.svg)](https://codecov.io/gh/nnetworth/networth-meta)
[![Dependency Status][daviddm-image]][daviddm-url]
[![NPM version][npm-image]][npm-url]


## Installation

```
  npm install --save @nnetworth/networth-meta
```

## Usage

```js
import { AccountBase, TransactionBase } from '@nnetworth/networth-meta';
```

## Created with
[Yeoman](https://npmjs.org/package/yo) and [Generator-simple-package](https://npmjs.org/package/generator-simple-package)

## License
MIT © [nghiattran]()

[npm-image]: https://badge.fury.io/js/networth-meta.svg
[npm-url]: https://npmjs.org/package/networth-meta
[travis-image]: https://travis-ci.org/nnetworth/networth-meta.svg?branch=master
[travis-url]: https://travis-ci.org/nnetworth/networth-meta
[daviddm-image]: https://david-dm.org/nnetworth/networth-meta.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/nnetworth/networth-meta
[coveralls-image]: https://coveralls.io/repos/@nnetworth/networth-meta/badge.svg
npm package: @nng-components/angular-material-color-picker
Description: Angular Material Color Picker
Author: HO Hong Quan
Latest version: 20.0.0

# Angular Material Color Picker for @angular/material 16.x, 17.x, 18.x, 19.x, 20.x

## Description

An Angular Material Color Picker.

## DEMO

@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-color-picker)

![Alt Text](demo_color_picker.png)

 Choose the version corresponding to your Angular version:

 Angular     | @nng-components/angular-material-color-picker
 ----------- | -------------------
 20          | 20.x+
 19          | 19.x+
 18          | 18.x+
 17          | 17.x+
 16          | 16.x+
 

## Getting started

```
npm install --save  @nng-components/angular-material-color-picker
```

## Setup

```
import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@nng-components/angular-material-color-picker';

@NgModule({
   ...
   imports: [
        ...
        NgxMatColorPickerModule
   ],
   providers: [
    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }
   ],
   ...
})
export class AppModule { }
```
@see [src/app/demo-colorpicker/demo-colorpicker.module.ts](src/app/demo-colorpicker/demo-colorpicker.module.ts)

## Using the component

### Color Picker (ngx-mat-color-picker)

```
<mat-form-field>
    <input matInput [ngxMatColorPicker]="picker" [formControl]="colorCtr" [disabled]="disabled">
    <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>
    <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>
</mat-form-field>
```

#### List of @Input

| @Input        	| Type     	| Default value 	| Description                                                          	|
|---------------	|----------	|---------------	|----------------------------------------------------------------------	|
| **disabled**      	| boolean  	| null          	| If true, the picker is readonly and can't be modified                	|
| **touchUi**    	   | boolean   | false           | Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. 	|

## Theming
- @see @angular/material [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
- Add the Material Design icon font to your index.html
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
```

## License
MIT
npm package: @nng-components/angular-material-file-input
Description: Angular Material File Input
Author: HO Hong Quan
Latest version: 20.0.0

# Angular Material File Input for @angular/material 16.x, 17.x, 18.x, 19.x, 20.x


## Description

An Angular Material File Input.


## DEMO

@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-file-input)

@see [LIVE DEMO](https://github.com/developer-1-nng/angular-material-components/)

![Alt Text](demo_file_input.png)

 Choose the version corresponding to your Angular version:

 Angular     | @nng-components/angular-material-file-input
 ----------- | -------------------
 20          | 20.x+
 19          | 19.x+
 18          | 18.x+
 17          | 17.x+
 16          | 16.x+


## Getting started

```
npm install --save @nng-components/angular-material-file-input
```

## Setup

```
import { NgxMatFileInputModule } from '@nng-components/angular-material-file-input';

@NgModule({
   ...
   imports: [
        ...
        NgxMatFileInputModule
   ]
   ...
})
export class AppModule { }
```

@see [src/app/demo-fileinput/demo-fileinput.module.ts](src/app/demo-fileinput/demo-fileinput.module.ts)

## Using the component

### File Input (ngx-mat-file-input)

```
<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept" [color]="color">
   </ngx-mat-file-input>
</mat-form-field>
```

#### You can provide a custom icon by using the directive *ngxMatFileInputIcon*

```
<mat-form-field>
   <ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept"
   [color]="color">
      <mat-icon ngxMatFileInputIcon>folder</mat-icon>
   </ngx-mat-file-input>
</mat-form-field>
```

#### You can use with all properties of MatFormField such as appearance variants, hint...

```
<mat-form-field appearance="outline">
  <ngx-mat-file-input [formControl]="file3Control">
  </ngx-mat-file-input>
  <mat-hint>Hint</mat-hint>
</mat-form-field>
```

#### List of @Input

| @Input        	| Type     	| Default value 	| Description                                                          	|
|---------------	|----------	|---------------	|----------------------------------------------------------------------	|
| **disabled**      	| boolean  	| null          	| If true, the file input is readonly.                	|
| **multiple**      	| boolean  	| false          	| If true, the file input allows the user to select more than one file.                	|
| **accept**    	   | string   | null           | Limiting accepted file types (For example: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.) 	|
| **color**      	| ThemePalette  	| null          	| Theme color palette for the component.                	|

## Theming
- @see @angular/material [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
- Add the Material Design icon font to your index.html
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
```

## License
MIT
npm package: @nng-components/angular-material-moment-adapter
Description: Angular Material Moment Adapter
Author: HO Hong Quan
Latest version: 20.0.0

# NgxMatMomentAdapter

## Description 
Moment Adapter for [@nng-components/angular-material-datetime-picker](https://www.npmjs.com/package/@nng-components/angular-material-datetime-picker)

## Getting started
```
npm install --save  @nng-components/angular-material-moment-adapter
```

## Setup

```
import { NgxMatMomentModule } from '@nng-components/angular-material-moment-adapter';
@NgModule({
   ...
   imports: [
      NgxMatMomentModule,
      NgxMatDatetimePickerModule,
   ],
   ...
})
export class AppModule { }
```

## License
MIT
npm package: @nnilky/classnames-miny
Description: An API compabile version of [classnames](https://www.npmjs.com/package/classnames) with a massively reduced bundle size, 800b -> 178b.
Author: Ben Brady
Latest version: 0.2.1

# Classnames Miny

An API compabile version of [classnames](https://www.npmjs.com/package/classnames) with a massively reduced bundle size, 800b -> 178b.

```shell
npm install @nnilky/classnames-miny
```

## Usage

classNames supports any number of arguments and contactoates them into a classname

If it's a falsey value, it's ignored. So you can do this:

```ts
classNames(isHidden && "hidden opacity-0")
```

If it's an array, it's concatenated, So you can do this:

```ts
let classes = []
if (isHidden) {
    classes.push("hidden")
    classes.push("opacity-0")
}
classNames(classes)
```

If it's an object, only keys with truth values are appended

```ts
classNames({
    "hidden opacity-0": false,
})
```

## Examples

```ts
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
```

```ts
import React, { useState } from 'react';
import classNames from 'classnames';

export default function Button (props) {
	const { disabled } = props

	return (
		<button
			className={classNames(
                "bg-white text-lg px-y py-2 duration-300",
                disabled ? 'border-neutral-400' : "border-neutral-700",
            )}
        >
			{props.label}
		</button>
	);
}
```
npm package: @nnilky/solid-hooks
Description: A set of compact utility hooks for solid.js, mostly meant my own personal projects but free to use anyway.
Author: Ben Brady
Latest version: 0.10.0

# Solid Hooks

A set of compact utility hooks for solid.js, mostly meant my own personal projects but free to use anyway.

They're designed to be as small as possible, in a few places there's multiple depending on your needs. For instance `useInterval` & `useDeltaInterval`, useDeltaInterval adds a deltaTime parameter that is not need in most cases so is a seperate function so that `useInterval` can be smaller.

There's no documentation, the docstrings should have enough information though.
npm package: @nnlp-il/yap-js-client
Description: YAP - Yet Another Parser - Hebrew NLP JavaScript/TypeScript Client
Author: NNLP-IL
Latest version: 0.0.3

# YAP Client

[![npm package][npm-img]][npm-url]
[![Issues][issues-img]][issues-url]

YAP was implemented to test the hypothesis on Joint Morpho-Syntactic Processing of Morphologically Rich Languages (MRLs) in a Transition Based Framework.

## How to use

* [Run YAP](https://github.com/onlplab/yap/) and  it via API (can run also via [Docker](https://hub.docker.com/repository/docker/roiwebiks/yap_api_2022))
* [Install](#install) the YAP Client
* [Use](Usage) The YAP Client Feature
## Install

```bash
npm i @nnlp-il/yap-js-client
```

## Usage

```js
const { YapClient } = require("@nnlp-il/yap-js-client");
const test = async () => {
    const client = new YapClient('http://localhost:8001');
    const result = await client.jointAnalysis("גנן גידל גנן בגן");
    console.log(result);
}
test();
```

## API

### jointAnalysis(text)

#### text

Type: `string`

Hebrew text to analyze

#### Output

Object containing the following fields:
* [Morphological Analysis](https://en.wikipedia.org/wiki/Morphological_parsing)
Morphological Analysis shows shows all the options of interpretations for each word in the sentence. 
* [Morphological Disambiguation](http://cs.haifa.ac.il/~shuly/publications/danny-thesis.pdf)
Morphological Disambiguation is the next step after a full Morphological Analysis.
Since the Morphological Analysis gave us all the possible options of each word in the sentence Morphological Disambiguation narrows down on the **most viable** option for each woord in the sentence.
* [Dependency Parsing](https://towardsdatascience.com/natural-language-processing-dependency-parsing-cf094bbbe3f7)
Dependency Parsing is the process to analyze the grammatical structure in a sentence and find out related words as well as the type of the relationship between them.
YAP returns a dependency tree of the inputted sentence.

[npm-img]:https://img.shields.io/npm/v/@nnlp-il/yap-js-client
[npm-url]:https://www.npmjs.com/package/@nnlp-il/yap-js-client
[issues-img]:https://img.shields.io/github/issues/nnlp-il/yap-js-client
[issues-url]:https://github.com/nnlp-il/yap-js-client/issues
npm package: @nnm/chatboy
Description: A chatbot on a Vue-based web and use the Google Dialogflow API.
Latest version: 0.2.5

# chatboy

![npm](https://img.shields.io/npm/v/@nnm/chatboy) ![NPM](https://img.shields.io/npm/l/@nnm/chatboy)

The goal of this project is to create a chatbot on a Vue-based web and use the Google Dialogflow API.



## STRUCTURE







## USAGE

> #### Create a Google Cloud project.

- [Google Dialogflow API](https://cloud.google.com/dialogflow/docs/)

- [Google Cloud Platform Project](<https://cloud.google.com/resource-manager/docs/creating-managing-projects>)

  


> #### Get a Dialogflow Authentication key

- [Cloud IAM Service Account](https://cloud.google.com/iam/docs/creating-managing-service-account-keys)

- [Cloud SDK](https://cloud.google.com/sdk/docs/)
- [Dialogflow Setting up authentication](https://dialogflow.com/docs/reference/v2-auth-setup)
- **GOOGLE_APPLICATION_CREDENTIALS**
  
  - [MAC](https://jungwoon.github.io/google%20cloud/2018/01/11/Google-Application-Default-Credential/)
- [WINDOWS 10](https://m.blog.naver.com/PostView.nhn?blogId=chandong83&logNo=220981452650&proxyReferer=https%3A%2F%2Fwww.google.com%2F)
  
- [ACCESS TOKEN](https://github.com/innFactory/react-native-dialogflow/issues/31)

  

> #### Install chatboy

- ```js
  npm install @nnm/chatboy
  ```



> #### Use chatboy

- ```js
  // Your Vuex store
  import store from './store/store.js'
  
  import 'chatboyStore' from '@nnm/chatboy'
  import '@nnm/chatboy/dist/chatboy.css'
  ```
- ```
  ...
  Vue.use(chatboyStore, { store });
  ...
  ```

- ```js
  <Chatboy project-name=""
           language-code=""
           access-token=""
  />
  ```



## PREVIEW









## TODO

- Try Google SDK
- Try SessionStorage
- Try Vuex
- Try KakaoTalk Style CSS





## LEARNED

- Google SDK
  - Get access token
  - Set GOOGLE_APPLICATION_CREDENTIALS
- Vue
  - Image import
- Vuex
  - Use within a npm package
    - Namespacing
    - Modularization
    - Dynamic module registration
    - Plug-in
- Publish npm package
  - Make entry point
  - Set image path
- CSS
  - Make Speech bubble tail
  - Position
  - Flex
- Webpack
  - Default rule of Image bundling on babel



## LICENSE

This is released under the MIT license. See [LICENSE](LICENSE) for details.
npm package: @nnm/page-translator
Description: Page translator using Google Cloud Translation API for Vue.js
Author: Woohyeon Jo
Latest version: 1.1.1

# page-translator
![](https://img.shields.io/npm/v/@nnm/page-translator.svg)
![NPM](https://img.shields.io/npm/l/@nnm/page-translator.svg)
![GitHub stars](https://img.shields.io/github/stars/woohyeonjo/page-translator.svg?style=social)

A Vue component that was created to replace a broken Google page translation service.

This component uses the `Google Cloud Translation API` and requires your  `API KEY`.

<br>

## Usage

>  ### Get Google Cloud Translation API KEY

- [Google Cloud Translation API](https://cloud.google.com/translate/?hl=ko&utm_source=google&utm_medium=cpc&utm_campaign=japac-KR-all-ko-dr-bkws-all-super-trial-e-dr-1003987&utm_content=text-ad-none-none-DEV_c-CRE_263225556921-ADGP_Hybrid+%7C+AW+SEM+%7C+BKWS+~+T1+%7C+EXA+%7C+ML+%7C+1:1+%7C+KR+%7C+ko+%7C+Translation+%7C+google+translate+api+%7C+en-KWID_43700031880242880-kwd-14329410560&userloc_1009871&utm_term=KW_google%20translate%20api&gclid=EAIaIQobChMIsYCE9_u44wIVj3ZgCh3MEwdKEAAYASAAEgILN_D_BwE)

<br>

> ### Install

- ```js
  npm install @nnm/page-translator
  ```

<br>

> ### Use

- ```js
  import 'page-translator' from '@nnm/page-translator'
  import '@nnm/page-translator/dist/page-translator.css
  ```

- ```js
  ...
  Vue.use(page-translator);
  ...
  ```

- ```js
  <page-translator target="laungage code ex) en, ko ..." 
                   position="left or right"
                   apikey="Input your API KEY"
  />
  ```

<br>




- Translator gif

  <img src="images/use.gif" alt="usage gif" width="1361">



- Translator OFF

  <img src="images/translator_disable.png" alt="usage image disable">



- Translator ON

  <img src="./images/translator_enable.png" alt="usage image enable">







<br>

## Bug

- ~~The function does not work if you press the button several times quickly.~~
  - ~~I think it's a function synchronization problem or DOM tree's rendering problem. I would appreciate it if you gave me a hint.~~
  - This problem was solved by adding a spinner to setTimeout.
<br>

## License

This is released under the MIT license. See [LICENSE](LICENSE) for details.