ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: add types for internals

Browse source
This commit is contained in:
ayo 2026-05-11 13:48:06 +02:00
parent e4e6003e3b
commit 292eac3b1d
2 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -49,7 +49,7 @@
</header> </header>
<main> <main>
<p>Colored circles that can pulse</p> <p>Colored circles that can pulse</p>
<status-indicator status="positive" pulse> <status-indicator style="--status-icon-size: 32px" status="positive" pulse>
All systems operational All systems operational
</status-indicator> </status-indicator>
<br /> <br />

6
src/status-indicator.ts
View file

@ -1,5 +1,7 @@
import { WebComponent, html } from 'web-component-base' import { WebComponent, html } from 'web-component-base'
type StatusType = 'default' | 'active' | 'positive' | 'intermediary' | 'negative'
class StatusIndicator extends WebComponent { class StatusIndicator extends WebComponent {
static shadowRootInit: ShadowRootInit = { static shadowRootInit: ShadowRootInit = {
mode: 'closed' mode: 'closed'
@ -10,7 +12,7 @@ class StatusIndicator extends WebComponent {
pulse: false pulse: false
} }
#indicatorColor: any = { #indicatorColor: Record<StatusType, string> = {
default: '216, 226, 233', default: '216, 226, 233',
active: '0, 149, 255', active: '0, 149, 255',
positive: '75, 210, 143', positive: '75, 210, 143',
@ -18,7 +20,7 @@ class StatusIndicator extends WebComponent {
negative: '255, 77, 77' negative: '255, 77, 77'
} }
#pulseAnimationCSSRules = { #pulseAnimationCSSRules: Partial<CSSStyleDeclaration> = {
animationName: 'pulse', animationName: 'pulse',
animationDuration: '2s', animationDuration: '2s',
animationTimingFunction: 'ease-in-out', animationTimingFunction: 'ease-in-out',