# sm-angular-component-suite
> Strongmind styled, html controls, and components (Angular v2.0.0+)
Latest version **0.0.31** (published 2019-03-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install sm-angular-component-suite
pnpm add sm-angular-component-suite
yarn add sm-angular-component-suite
bun add sm-angular-component-suite
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.31 |
| Published | 2019-03-28 |
| First published | 2017-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 147.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Strongmind - Night's Watch Team |
| Maintainers | nightswatch |
| Keywords | strongmind, angular, typescript, number picker |
## Links
- npm: https://www.npmjs.com/package/sm-angular-component-suite
- Repository: https://github.com/StrongMind/angularcomponentsdemo
- Homepage: https://demo.angular-components.strongmind.com
- Issues: https://github.com/strongmind/angularcomponentsdemo/issues
- npm.io page: https://npm.io/package/sm-angular-component-suite
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 0.0.31 (latest) — 2019-03-28
- 0.0.30 — 2019-03-28
- 0.0.29 — 2019-03-28
- 0.0.28 — 2019-03-27
- 0.0.27 — 2018-10-01
- 0.0.25 — 2018-01-08
- 0.0.24 — 2018-01-08
- 0.0.23 — 2018-01-02
- 0.0.22 — 2017-12-21
- 0.0.21 — 2017-12-20
- 0.0.20 — 2017-12-20
- 0.0.19 — 2017-12-20
- 0.0.18 — 2017-12-20
- 0.0.17 — 2017-12-20
- 0.0.16 — 2017-12-20
- … 14 more at https://npm.io/package/sm-angular-component-suite/versions
## README
# Strongmind Angular Component Suite #
Strongmind styled, html controls, and components (Angular v2.0.0+)
## Requirements ##
* [Angular](https://angular.io) (2.0.0+)
## UI Dependency ##
* None (Twitter Bootstrap v3+ - Recommended)
## Installation ##
```
npm install sm-angular-component-suite -save
```
## Basic usage ##
Import desired [components] in your `app.module` and add it to the declarations array.
Alternatively, you can import desired [components] to a shared module, to make it available across all modules in your Angular application.
## Example usage (NumberPickerComponent) ##
```typescript
...
import { NumberPickerComponent } from 'sm-angular-component-suite/components';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
NumberPickerComponent
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Add the `strongmind-number-picker` directive to the page where you want to use the number picker.
Quickest way to use numberpicker
```html
```
Or, to update just some option values
```html
```
Or to modify all/any numberpicker options
```html
```
### Directive Inputs and Outputs ###
| Attribute | Type | Required | Default | Description |
| :------------- |:-------------| :-----: | :-----: | :----------- |
| pickerValue | (Input) Number | Yes | | The value of the number picker from parent component. |
| numberPickerOptions | (Input) [NumberPickerOption] | No | object | The strongly typed object to define options for picker. |
| min | Number | No | 0 | The minimal number limit on the number picker. |
| max | Number | No | 100 | The maximum number limit on the number picker. |
| step | Number | No | 1 | The step value for the number picker. |
| acceptNull | Boolean | No | false | Defines if the picker should allow the user to leave the input empty, if false, a number will be expected. |
| showValidation | Boolean | No | true | Defines if the picker should show validation errors, if false, the input will reset to a previous value on invalid state instead of showing the error. |
| showAllErrors | Boolean | No | false | Defines if all errors will be shown on invalid picker state, if false, only the first error will be shown (business value - limited client area). |
| pickerCss | String | No | 'input-group' | Defines the picker css. Overrideable to add custom styles. The picker follows 'Twitter Bootstrap' standards. |
| buttonCss | String | No | 'btn btn-secondary' | Defines the picker button css. Overrideable to add custom styles. The picker buttons follow 'Twitter Bootstrap' standards. |
| buttonIconDecrease | String | No | | Defines a picker button icon for decrease. If set, will render icon in decrease button. |
| buttonIconIncrease | String | No | | Defines a picker button icon for increase. If set, will render icon in increase button. |
| inputDisabled | Boolean | No | false | Defines if the picker should be disabled for the user if true. |
| inputWidth | Number | No | | Defines a picker inputs specific width. |
| errorMessages | NumberPickerErrorMessage | | | Defines error messages for invalid states. |
| invalidNumber | String | No | | 'Invalid Number' |
| invalidMin | String | No | | 'Invalid min value' |
| invalidMax | String | No | | 'Invalid max value' |
| invalidStep | String | No | |'Invalid step value' |
| invalidEmpty | String | No | | 'Value cannot be empty' |
[npm-url]: https://npmjs.org/package/sm-angular-component-suite
[github-url]: https://github.com/StrongMind/angularcomponentsdemo
---
_Source: https://npm.io/package/sm-angular-component-suite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._