open-index/open-npm huggingface dataset:
npm package: @schemater/bootstrap
Description: Collection of field's types for `@schemater/core` build on base of `bootstrap`
Latest version: 2.1.2

Collection of field's types for `@schemater/core` build on base of `bootstrap`

## Input types

You can use input fields passing only type `Input` and `ngModel` (validation feedback is not working then)

```html
<schemater-input-field type="text" [(ngModel)]="model"></schemater-input-field>
```

You can use alsoo use it with parent `FormGroup`  (validation feedback is working).
You can provide `field: SchematerFieldConfig` when `field.id` is `formControlName` or provide `formControlName`

```html
<form [formGroup]="formGroup">
    <schemater-input-field type="text" formControlName="text"></schemater-input-field>

    <schemater-input-field [field]="{id: 'text', inputType: 'text', config: {placeholder: 'Placeholder for text'}}"></schemater-input-field>
</form>
```

**text** `InputTextComponent`

Config options:
- `placeholder: string` - placeholder for input

**checkbox** `InputCheckboxComponent`

**select** `InputSelectComponent`

Config options:
- `options: {id:string|int, text:string}[]` - options as array of 'id', 'text' object

**textarea** `InputTextareaComponent`

Config options:
- `placeholder: string` - placeholder for input
- `rows: number` - number of rows

**password** `InputPasswordComponent`

**hidden** `InputHiddenComponent`

**int** `InputIntComponent`

**float** `InputFloatComponent`

**email** `InputEmailComponent`

**toggle** `InputToggleComponent`

**date** `InputDateComponent`

Config options:
- `placeholder: string` - placeholder for input

**datetime** `InputDatetimeComponent`

Config options:
- `placeholder: string` - placeholder for input

**array** `InputArrayComponent`

Config options:
- `field: SchematerFieldConfig` - definition of field **required**

**fields-array** `InputFieldsArrayComponent`

Config options:
- `fields: SchematerFieldConfig[]` - table of fields **required**

<!--**complex-select** `InputComplexSelectComponent` - select box build on `ng-select`-->

<!--Config options:-->
<!--- `options: {id:string|int, text:string}[]` - options as array of 'id', 'text' object-->
<!--- `multiple: boolean` - can be multiple-->
<!--- `appendTo: string` - css selector of element which dropdown will be appended to. Body should have `position: relative` style-->
npm package: @schemater/bootstrap-ckeditor
Description: Ckeditor input field for `@schemater/core` dependent on [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)
Latest version: 0.6.0

Ckeditor input field for `@schemater/core` dependent on [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)

# Usage

1. Import `SchematerBootstrapCkeditorModule` to Your project
1. Add `InputCkeditorComponent` into Your `SchematerCore.forRoot` configuration to `inputComponents`. You can pick name as You want. *Example*: `{name: 'ckeditor', component: InputCkeditorComponent}`

# Available options (in `field.config`)

- `ckeditorConfig: any` - configuration of ckeditor
npm package: @schemater/bootstrap-color
Description: Color input field for `@schemater/core` dependent on [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)
Latest version: 2.1.0

Color input field for `@schemater/core` dependent on [ngx-color-picker](https://github.com/zefoy/ngx-color-picker)

# Usage

1. Import `SchematerBootstrapColorModule` to Your project
1. Add `InputColorComponent` into Your `SchematerCore.forRoot` configuration to `inputComponents`. You can pick name as You want. *Example*: `{name: 'color', component: InputColorComponent}`
1. You can add styles `@import '@schemater/bootstrap-color/colorpicker.scss`

# Available options (in `field.config`)

- `getPresetColorsFromBootstrapVariables: boolean` - tries to fetch colors from bootstrap variables. `presetColors` are ignored

- `presetColors: string[]` - array of preset colors. *Example*: `['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']`
- `label: string` - text to print inside colorpicker button
- `defaultColor: string` - color (in hex) that will be applied if is null or undefined at init
npm package: @schemater/components
Description: @schemater/components consists of components that use `@scehmater/core` and `bootstrap` to create components.
Latest version: 2.1.0

@schemater/components consists of components that use `@scehmater/core` and `bootstrap` to create components.

# Table

This component is used to present data table. It's build using `@angular/cdk` and `@fortawesome/angular-fontawesome`

## Usage

1. Import `@schemater/core` and `@schemater/bootstrap` and define all fields.
1. Import `SchematerComponentsModule`
1. Put `<schemater-table></schemater-table>` into template

## Parameters

### Inputs

`fields: SchematerFieldConfig[]` definitions of available fields. **required**

`data:any[]`
data in array to render in SchematerTable. Keys in data row should be the same as `field.id` in `fields`

`displayFields:string[]` Array of `field.id` to display in table

`sorting:SchematerTableSorting` Display indicator of which `field.id` is sorted and in which directions.
*Example*: `{fieldId: 'ASC'}`

`firstStickyColumnCellTemplate:any` Reference to template which will be rendered in cell of first column.
*Example*: `<ng-template #firstColumnCell let-row let-index="index">{{ index }} has data {{ row |json}} </ng-template>`

`firstStickyColumnHeaderTemplate:any` Reference to template which will be rendered in header of first column.
*Example*: `<ng-template #firstColumnHeader>Header</ng-template>`

`lastStickyColumnCellTemplate:any` Reference to template which will be rendered in cell of last column.
*Example*: `<ng-template #lastColumnCell let-row let-index="index">{{index}} has data {{row|json}} </ng-template>`

`lastStickyColumnHeaderTemplate:any` Reference to template which will be rendered in header of last column.

*Example*: `<ng-template #lastColumnHeader>Header</ng-template>`

`options:SchematerTableOptions` table options:

- `showSelection: boolean` - show selection column. *Default*: `false`
- `showSorting: boolean` - show column sorting. *Default*: `false`
- `maxColumnWidth: "auto" | boolean` - max width od column. *Default*: `"auto"`
- `minColumnWidth: "auto" | boolean` - min width od column. *Default*: `"auto"`

### Outputs

`sortingChange: SchematerTableSorting` event triggered when sorting changes

`selectionChange: SchematerFieldConfig[]` event triggered when selection changes



# Item list

This component is used to present list of fields as details.

## Usage

1. Import `@schemater/core` and `@schemater/bootstrap` and define all fields.
1. Import `SchematerComponentsModule`
1. Put `<schemater-item-list></schemater-item-list>` into template

## Parameters

### Inputs

`fields: SchematerFieldConfig[]` definitions of available fields. **required**

`values:any`
data of fields to render in SchematerItemList. Keys in data should be the same as `field.id` in `fields`

`displayFields:string[]` Array of `field.id` to display in list
npm package: @schemater/datetime
Description: Datetime field for `@schemater/core` dependent on [ng-pick-datetime](https://daniel-projects.firebaseapp.com/owlng/date-time-picker)
Latest version: 2.1.0

Datetime field for `@schemater/core` dependent on [ng-pick-datetime](https://daniel-projects.firebaseapp.com/owlng/date-time-picker)

# Usage

1. Import `SchematerDatetimeModule` to Your project
1. Add `InputColorComponent` into Your `SchematerCore.forRoot` configuration to `inputComponents`. You can pick name as You want. *Example*: `{name: 'color', component: InputColorComponent}`
1. You can add styles `@import '@schemater/bootstrap-color/colorpicker.scss`

# Available options (in `field.config`)

- `getPresetColorsFromBootstrapVariables: boolean` - tries to fetch colors from bootstrap variables. `presetColors` are ignored

- `presetColors: string[]` - array of preset colors. *Example*: `['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']`
- `label: string` - text to print inside colorpicker button
- `defaultColor: string` - color (in hex) that will be applied if is null or undefined at init
npm package: @schemater/filter-bar
Description: Filter bar that utilizes `@schemater/core` and `@schemater/bootstrap` to present nice `filter bar` as a complex searcher.
Latest version: 2.1.0

Filter bar that utilizes `@schemater/core` and `@schemater/bootstrap` to present nice `filter bar` as a complex searcher.

## Usage

1. Import `@schemater/core` and `@schemater/bootstrap` and define all fields.
1. Import `SchematerFilterBarModule.forRoot({})`
1. Put `<schemater-filter-bar [fields]="fields" [mainField]="mainField"></schemater-filter-bar>` into template

## Parameters

### Inputs

`fields: SchematerFieldConfig[]` definitions of available fields. **required**

`mainField: string` - id of main search field. Field must be of type string **required**

`options: SchematerFilterBarOptions` search bar options:
- `filters: boolean` - Filters turned on or not. *Default*: `true`
- `showSearchButton: boolean` - Show search button in bar. *Default*: `true`
- `emitSearchOnFormChange: boolean` - Emit search event on every form value change. *Default*: `true`
- `emitSearchDebounce: number` - Debounce time of emit search event. *Default*: `500`
- `filterManagement: boolean` - Filter management turned on or not. *Default*: `false`
- `mainFieldPlaceholder: string` - placeholder text for main field. If not provided the name of mainField is taken

`value: { [s: string]: SchematerSearchFieldValue }` value of form. Component will emit search event on every value change. `JSON.stringify` is used for compariosion weather value has changed

`defaultFilters: Filter[]` array of default filters. Those filters cannot be removed or edited

`customFilters: Filter[]` array of user defined filters. Those filters can be removed or edited

`selectedFilter: string|number` filter's id of selected Filter

### Outputs
`search: { [s: string]: SchematerSearchFieldValue }` event triggered on form value change or search button clicked

`searchButtonClicked: { [s: string]: SchematerSearchFieldValue }` event triggered on search button clicked. Using that Output You can force to perform search on user action

`filterChange: string|number` event triggered when filter is changed. Passes id of Filter

`customFiltersChange: Filter[]` event triggered when custom filters are changed
npm package: @schemater/ngx-bootstrap
Description: Collection of field's types for `@schemater/core` build on base of `ngx-bootstrap`
Latest version: 0.2.3

Collection of field's types for `@schemater/core` build on base of `ngx-bootstrap`

## Input types

You can use input fields passing only type `Input` and `ngModel` (validation feedback is not working then)

```html
<schemater-input-field type="text" [(ngModel)]="model"></schemater-input-field>
```

You can use alsoo use it with parent `FormGroup`  (validation feedback is working).
You can provide `field: SchematerFieldConfig` when `field.id` is `formControlName` or provide `formControlName`

```html
<form [formGroup]="formGroup">
    <schemater-input-field type="text" formControlName="text"></schemater-input-field>

    <schemater-input-field [field]="{id: 'text', inputType: 'text', config: {placeholder: 'Placeholder for text'}}"></schemater-input-field>
</form>
```

**text** `InputTextComponent`

Config options:
- `placeholder: string` - placeholder for input

**checkbox** `InputCheckboxComponent`

**select** `InputSelectComponent`

Config options:
- `options: {id:string|int, text:string}[]` - options as array of 'id', 'text' object

**textarea** `InputTextareaComponent`

Config options:
- `placeholder: string` - placeholder for input
- `rows: number` - number of rows

**password** `InputPasswordComponent`

**hidden** `InputHiddenComponent`

**int** `InputIntComponent`

**float** `InputFloatComponent`

**email** `InputEmailComponent`

**toggle** `InputToggleComponent`

**radio-button** `InputRadioComponent` - dependent on `NgxBootstrap`

Config options:
- `options: {id:string|int, text:string, btnClass?: string}[]` - available options
- `btnClass: string` - class of btn. *Default*: `btn-outline-secondary`

**date** `InputDateComponent` - dependent on `NgxBootstrap`

Config options:
- `placeholder: string` - placeholder for input

**datetime** `InputDatetimeComponent`

Config options:
- `placeholder: string` - placeholder for input

**array** `InputArrayComponent`

Config options:
- `field: SchematerFieldConfig` - definition of field **required**

**fields-array** `InputFieldsArrayComponent`

Config options:
- `fields: SchematerFieldConfig[]` - table of fields **required**

**complex-select** `InputComplexSelectComponent` - select box build on `ng-select`

Config options:
- `options: {id:string|int, text:string}[]` - options as array of 'id', 'text' object
- `multiple: boolean` - can be multiple
- `appendTo: string` - css selector of element which dropdown will be appended to. Body should have `position: relative` style