open-index/open-npm huggingface dataset:
npm package: @poseclop/ng-responsive-ui
Description: Responsive layout tools for angular application. Material guidelines
Author: Benoit TASSIN
Latest version: 0.0.2

# NgResponsiveUi

This library provides a service and 2 directives to implement [Material Design Responsive Layout](https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins) in your angular application.

:warning: This module was not tested in depth for production. Use at your own risk and peril.

## Dependencies
This module requires [@angular/cdk](https://www.npmjs.com/package/@angular/cdk).

## Installation
1. Install the Package with `npm install @poseclop/ng-responsive-ui`
2. Import the module in your application
    ```typescript
    @ngModule({
        ...,
        imports: [
            ...,
            NgResponsiveUIModule
        ]
    })
    ```

**Since the module exports directives, best practice is to export it from a shared module to consume across your application feature modules**

## API
#### ResponsiveUIService
###### Properties
Name | Description
---- | -----------
`gutter$: Observable<number>` | The margin / padding / gutter size in px for current screen
`columns$: Observable<number>` | The number of columns for responsive grid
`screenLayout$: Observable<ScreenLayout>` | The current screen breakPoint

###### ScreenLayout (matches @angular/core/layout > Breakpoints)
- HandsetPortrait
- HandsetLandscape
- TabletPortrait
- TabletLandscape
- WebPortrait
- WebLandscape

#### ResponsiveContainerDirective
Center the component horizontally and set margins according to [material design responsive layout practices](https://material.io/design/layout/responsive-layout-grid.html#breakpoints).
###### Selector
\[responsiveContainer]
###### Inputs
Name | Description
---- | -----------
`maxWidth: number` | The max width of the container in px
`verticalMargin: number` | the vertical margin of the container in px

#### ResponsiveGridDirective
Style the component as a grid following [Material Design best practices](https://material.io/design/layout/responsive-layout-grid.html#breakpoints) (gutter size and number of columns)
###### Selector
\[responsiveGrid]
npm package: @poseclop/ng-typed-form
Description: An angular service to provide typed reactive forms in applications
Author: Benoit TASSIN
Latest version: 0.0.2

# NgTypedForm

Provides an angular service to generate typed reactive forms.

The interface for typed forms is inspired from [this gist](https://gist.github.com/dmorosinotto/76a9272b5c45af1f78a61e7894df5777#file-typedforms-d-ts)

:warning: This module was not tested in depth for production. Use at your own risk and peril.

## Installation
1. Install the Package with `npm install @poseclop/ng-typed-form`
2. Import the module in your application (ReactiveFormsModule also required)
    ```Typescript
    @ngModule({
        ...,
        imports: [
            ...,
            NgTypedFormModule,
            ReactiveFormsModule
        ]
    })
    ```

## API
### NgTypedFormService
###### Methods
Name | Return | Description
---- | ------ | -----------
`generateTypedFormControl<T>(value: T, config?: IPosConfig)` | `TypedFormGroup<T>` | Generate a typed FormGroup
`generateTypedFormArray<T>(value: T, config?: IPosConfig)` | `TypedFormArray<T>` | Generate a typed FormArray (type: T[])
`generateTypedFormGroup<T>(value: T: config?: PosFormCongif)` | `TypedFormGroup<T>` | Generate a typed FormGroup
###### IPosConfig
Name | Description
---- | -----------
`disabled: boolean` | disable the control (default: false)
`nullDefault: boolean` | nullify the default value (default: false)
`validators: Validator | Validator[]` | set the default validators
###### PosFormConfig<T>
An object partially matching T with IPosConfig assigned to each value.

## Limitations
Currently, the service will generate a FormArray form any array provided as default values. Arrays with varying types are not supported.

This package has not been tested rigorously. Use at you own rish and peril

## Todo
- [ ] Allow the user to provide reactive form configuration
- [ ] Manage form arrays with different types
- [ ] Allow FormControls with values of type Array
- [X] Manage null values
- [ ] Manage interface declaration with partial default value