ng-fancy-gui/README.md

This package contains components, for creating userinterfaces in a Angular app.

# Ng Fancy GUI

This package contains components, for creating userinterfaces in a Angular app.

You can play with the components [here](http://ng-fancy-gui.rzcoding.ch)


## Installation

```
npm i ng-fancy-gui
```
  
Add to app module or any other Angular module.
```ts
// src/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {NgFancyGUIModule} from 'ng-fancy-gui'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgFancyGUIModule  //<-- added here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```


Import styles

```scss
// src/styles.scss
@import '~ng-fancy-gui/scss/style.scss';
```

If you want to prevent your browser from negative scrolling add the following CSS to your global stylesheet. This is recommended if you are using the image input or the imagecropper (as overlay).  

  
```css
html {
  overflow: hidden;
}

body {
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
}
```

**Important:** The scroll event is now fired on the body object, not the window object.


## Customize styles
```scss
// customize to your needs
$inputElementsColor: rgb(25, 123, 204);
$border-color: gray;
$font-color: black;
$invalid: red;

// must be importet after variable definitions
@import '~ng-fancy-gui/scss/style.scss';
```

## Components


### Keywordpicker

#### Usage

##### Inputs 

input                                     | description
----------------------------------------- | -------------
config: KeywordPickerConfig               | Defines how the keywordpicker behaves 
source: string[] \| KeyValue[]            | Array with autocompleteitems. This input is only used if datasource is set to Input and autocompleteMode is set to true.
invalid: boolean                          | Changes the appearance of the inputelement to a invalid state if it is set to true
placeholder: string                       | Placeholder of the keywordpicker

```html
<fg-keyword-picker 
                [placeholder]="null" 
                [config]="null" 
                [source]="null"
                [invalid]="false">
</fg-keyword-picker>
```


#### Configurtaion


You can configure the behavior of the keywordpicker by defining a keywordpickerconfig object and passing it into the keywordpicker component.

The constructor of the keywordpickerconfig class takes the following parameters:


parameter                                                   | description
----------------------------------------------------------- | -------------
keywordType: KeywordType                                    | Defines the type of a keyword item 
autocompleteMode: boolean                                   | Defines if a autocomplete dropdown is shown. Setting this value to true also means, that you can not pick a keyword if it does not exist in the autocomplete dropdown.
autoCompleteSource: AutoCompleteSource                      | Defines how the autocomplete items are retrived
dataMapperFunction: (x: any \| any[])=> KeyValue[] \| string[] | This value only takes effect if autocompleteSourceMode is set to true. Pass in a function, which maps the autoCompleteSource to a array matching the type selected at the keywordType parameter (x represents the API response).
autocompleteSourceUrl: string                               | Only takes effect if autoCompleteMode is set to true and autocompleteSource is set to ApiEndpoint


##### Example autocomplete with the source API:
```ts
public keywordPickerConfig: KeywordPickerConfig = new KeywordPickerConfig(
    KeywordType.KeyValue,
    true,
    AutCompleteSource.ApiEndpoint,
    (x: any[]) => {
      return x.map<KeyValue>(x => {
        return {
          key: x.id,
          value: x.name
        }
      });
    },
    "https://api.thecatapi.com/v1/breeds"
  );
```

#### Reactive forms

##### Write value
**value:** string[] | KeywordSourceItem[] depending on the keywordtype parameter

##### Value
**value:** string[] | KeywordSourceItem[] depending on the keywordtype parameter



### Imageinput
```html

<fg-input-image [width]="750" [height]="500" [invalid]="false"></fg-input-image>

```


#### Reactive forms

##### Write value
**value:** string (imagepath)

##### Value
**value:** string (base64 encoded image)

### Rangeinput
```html

<fg-input-range [value]="2" [min]="0" [max]="100"></fg-input-range>

```

#### Reactive forms

##### Write value
**value:** number

##### Value
**value:** number


### Betweeninput
```html
<fg-input-between [min]="0" [max]="100"></fg-input-between>
```

#### Reactive forms

##### Write value
[min: number, max: number]

##### value
[min: number, max: number]


### Imagecropper


#### Usage

##### Inputs 

input                       | description
--------------------------- | -------------
config: ImageCropperConfig  | Defines how the imagecropper behaves 
imageSrc: string            | Path to the image wich should be cropped

##### Outputs
output                                  | description
--------------------------------------- | -------------
cancle                                  | Is emitted when user clicks on the cancle button of the imagecropper
continue: string(base64 encoded image)  | Is emitted when user clicks on the continue button of the imagecropper


```html
<fg-image-cropper
                  [config]="null"
                  (cancle)="null"
                  (continue)="null"
                  [imageSrc]="null">
</fg-image-cropper>
```

#### Configuration

You can configure the behavior of the keywordpicker by defining a imageCropperConfigObject and passing it into the keywordpicker component.

The constructor of the keywordpickerConfigClass takes the following parameters:

parameter                   | description
--------------------------- | -------------
width: number               | Defines the width of the outputimage
height: number              | Defines the height of the outputimage
rasterlevels: number[]      | Defines the levels of rasters


##### Example:
```ts
 public cropperConfig: ImageCropperConfig = new ImageCropperConfig(
    500,
    600,
    [4, 8, 16]
  );
```


### Sliderinput

#### Usage

##### Inputs 

input            | description
---------------- | -------------
iconPath: string | Path to a image 
additive: string | String which will be added after the displayed value

##### Outputs
output                      | description
--------------------------- | -------------
change: number              | Emmits the new value


```html
<fg-slider (change)="null" [iconPath]="null" [additive]="null"></fg-slider>

```

#### Reactive forms
Currently not supported


### Infinite Slider

#### Usage

##### Outputs
output                      | description
--------------------------- | -------------
change: number              | Emmits -1 if slided right, emmits 1 if slided left


```html
<fg-slider-infinite (change)="null"></fg-slider-infinite>
```

#### Reactive forms
Currently not supported