├── src ├── components │ ├── nvq-editor │ │ ├── nvq-editor.scss │ │ ├── nvq-editor.tsx │ │ └── readme.md │ ├── nvq-label │ │ ├── readme.md │ │ ├── nvq-label.tsx │ │ └── nvq-label.scss │ ├── nvq-progress-bar │ │ ├── readme.md │ │ ├── nvq-progress-bar.scss │ │ └── nvq-progress-bar.tsx │ └── nvq-autocomplete │ │ ├── readme.md │ │ ├── nvq-autocomplete.scss │ │ └── nvq-autocomplete.tsx ├── examples │ ├── local │ │ ├── nvq-label.html │ │ ├── nvq-editor.html │ │ ├── nvq-progress-bar.html │ │ └── nvq-autocomplete.html │ └── npm │ │ ├── nvq-label.html │ │ ├── nvq-editor.html │ │ ├── nvq-progress-bar.html │ │ └── nvq-autocomplete.html ├── index.html └── components.d.ts ├── .gitignore ├── tsconfig.json ├── .github └── FUNDING.yml ├── stencil.config.ts ├── package.json └── LICENSE /src/components/nvq-editor/nvq-editor.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | 5 | *~ 6 | *.sw[mnpcod] 7 | *.log 8 | *.lock 9 | *.tmp 10 | *.tmp.* 11 | log.txt 12 | *.sublime-project 13 | *.sublime-workspace 14 | 15 | .stencil/ 16 | .idea/ 17 | .vscode/ 18 | .sass-cache/ 19 | .versions/ 20 | node_modules/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | .env -------------------------------------------------------------------------------- /src/components/nvq-label/readme.md: -------------------------------------------------------------------------------- 1 | # nvq-label 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ---------- | ----------- | ----------- | -------- | ----------- | 12 | | `helpText` | `help-text` | | `string` | `undefined` | 13 | | `text` | `text` | | `string` | `undefined` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with [StencilJS](https://stenciljs.com/)* 19 | -------------------------------------------------------------------------------- /src/components/nvq-progress-bar/readme.md: -------------------------------------------------------------------------------- 1 | # nvq-progress-bar 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | -------- | ----------- | 12 | | `max` | `max` | | `number` | `100` | 13 | | `value` | `value` | | `number` | `undefined` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with [StencilJS](https://stenciljs.com/)* 19 | -------------------------------------------------------------------------------- /src/components/nvq-progress-bar/nvq-progress-bar.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | .progress-container { 3 | display: flex; 4 | height: var(--progress-height, 20px); 5 | background: var(--progress-background, lightgrey); 6 | overflow: hidden; 7 | border-radius: 20px; 8 | .progress-bar { 9 | background: var(--progress-color, lightblue); 10 | width: calc(var(--current-value, 0) * 100% / var(--max-value, 100)); 11 | } 12 | .progress-bar-remainder { 13 | flex: 1; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/components/nvq-label/nvq-label.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, h } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'nvq-label', 5 | styleUrl: 'nvq-label.scss', 6 | shadow: true 7 | }) 8 | export class NvqLabel { 9 | 10 | @Prop() text: string; 11 | @Prop() helpText: string; 12 | 13 | render() { 14 | return ( 15 |