<seven-segment> A Segmented Display Web Component
---
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
- **Demo** - For a live demo visit the Storybook docs
- Tutorial and walkthrough on Medium
## Design Goals
๐จ **HTML Canvas** Render using HTMLCanvas
๐ฆ **Vanilla Web Component** Export as a dependency-free vanilla web component, usable with just HTML, CSS, and JS
#๏ธโฃ **Typescript** Written in Typescript
๐ **Styles** Offer fully customizable styling. Where possible use CSS to control customized settings
๐งพ **Support CSS props** CSS properties like padding, margin, filters, etc., should affect the element as expected
๐ **Pan & Zoom** Support ability to zoom in and change center point of the board
๐ **Accessibility** Implement accessibility recommendations. WCAG, WAI-ARIA
๐น๏ธ **Interactivity** Support user interactivity features including touch input, hover, selection, highlighting, and clicking.
## Installation
```bash
npm i @dartbot/segment
```
## Usage
```html
```
## Linting and formatting
To scan the project for linting and formatting errors, run
```bash
npm run lint
```
To automatically fix linting and formatting errors, run
```bash
npm run format
```
## Testing with Web Test Runner
To execute a single test run:
```bash
npm run test
```
To run the tests in interactive watch mode run:
```bash
npm run test:watch
```
## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```
To build a production version of Storybook, run
```bash
npm run storybook:build
```
## Tooling configs
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
## To Do
- [ ] Set Format
- [x] char masks
- [ ] align
- [ ] Export Image
- [ ] standard
- [ ] large size
- [ ] Auto color calc
- [ ] Create your own
- [ ] Styles (shadow, glow)
- [ ] Effects
- [ ] marquee, blink, rotate, rotate fill
- [ ] Additional segments
- [ ] 16, 14, Posey
- [ ] Unit Tests
Storybook Documentation