open-index/open-npm huggingface dataset:
npm package: @satsang/library
Description: This is a UI design library of Satsang
Author: Satsang
Latest version: 14.2.4

# PACKAGE DESCRIPTION

**DEPENDENCY:**

```
"@angular/common": "^14.2.0",
"@angular/core": "^14.2.0"
"tslib": "^2.3.0"
```

**MODULE IMPORT**
`import SatsangDesignModule in app.ts file`

## 1. BUTTON

**SELECTOR:** `<sat-button>`

**Property (6):**

```
  i. [btntext]="'Write text on the button'"
  ii. [isDisable]="false"    (allowed: false/true only)
  iii. [setWidth]="'100px'"   (allowed: 100px/10%/fit-content/auto)
  iv. [imagePath]="'../../your/icon/path/example.svg'" (allowed SVG file with 24px X 24px only)
  v. [state]="'preceeding'"  (allowed: default/preceeding/trailing/icononLy)
  vi. [size]="'large'"       (allowed: large/medium/small)
  vii. [type]="'danger'"     (allowed: primary/secondary/tertiary/danger)
  viii. [mode]="'light'"     (allowed: dark/light)
  ix. [isRound]="true"       (allowed: true/false)

```

For output set the below event in HTML

```
(onClickResponse)="yourClickFunction()"

```

write the logic for click

```
yourClickFunction(){
  alert(Clicked..!)
}
```

Example

```
<sat-button
  [btntext]="'Button'"
  [isDisable]="true"
  [setWidth]="'98px'"
  [imagePath]="'../../assets/heart-line.svg'"
  [state]="'preceeding'"
  [size]="'large'"
  [type]="'primary'"
  [mode]="'dark'"
  [isRound]="false"
  (onClickResponse)="onClickBtn2()"
>

</sat-button>
```

## 2. INPUT

**SELECTOR:** `<sat-input>`

**Property**

```
  i. [label]="'Name'"
  ii. [type]="'text'"
  iii. [setWidth]="'380px'"
  iv. [placeholderText]="'Enter name'"
  v. [parentForm]="form" (enter your FormGroup name)
  vi. [fieldName]="'name'"
  vii. [errorText]="'Invalid Name'"
  viii. [inpSize]="'large'"
  ix. [mode]="'dark'" (dark/light)
```

Example

```
  <sat-input
    [label]="'Name'"
    [type]="'text'"
    [setWidth]="'380px'"
    [placeholderText]="'Enter name'"
    [parentForm]="form"
    [fieldName]="'name'"
    [errorText]="'Invalid Name'"
    [inpSize]="'large'"
    [mode]="'dark'"
    formControlName="name" (give the formcontrol name)
  >
  </sat-input>
```