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>