core/countdown-interval/countdown-interval.component.ts
Component to count down specific time interval, then emit when countdown ends. Next countdown is started right after previous one.
OnInit
OnDestroy
| selector | c8y-countdown-interval |
| standalone | true |
| imports |
AsyncPipe
C8yTranslatePipe
|
| templateUrl | ./countdown-interval.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
| config |
Type : literal type
|
| countdownInterval |
Type : number
|
|
Time in milliseconds to count down from. |
| countdownEnded |
Type : EventEmitter
|
|
Emits when countdown ends. |
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| reset |
reset()
|
|
Returns :
void
|
| start |
start()
|
|
Starts the countdown timer.
Returns :
void
|
| stop | ||||||||
stop(stopAtZero)
|
||||||||
|
Stops the countdown timer.
Parameters :
Returns :
void
|
| enableTransition$ |
Default value : new BehaviorSubject<boolean>(false)
|
| progressPercentage$ |
Default value : new BehaviorSubject<number>(0)
|
| runSpinner$ |
Default value : new BehaviorSubject(false)
|
| secondsUntilRefresh$ |
Type : BehaviorSubject<string>
|
| shouldShowPulseIcon |
Default value : computed(() => this._config().enforcePulseIcon ?? false)
|
| countdownInterval | ||||||
getcountdownInterval()
|
||||||
setcountdownInterval(value: number)
|
||||||
|
Time in milliseconds to count down from.
Parameters :
Returns :
void
|
| config | ||||||
setconfig(value: literal type)
|
||||||
|
Parameters :
Returns :
void
|
@if (!shouldShowPulseIcon()) {
<div
class="time-elapsed"
[title]="
'{{ secondsLeft }} s / {{ interval }} s'
| translate
: { secondsLeft: secondsUntilRefresh$ | async, interval: countdownInterval / 1000 }
"
data-cy="c8y-countdown-interval--countdown"
>
<svg
style="transform: rotate(-90deg)"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
[style.stroke-dashoffset]="100 - (progressPercentage$ | async)"
[style.transition]="(enableTransition$ | async) ? 'stroke-dashoffset 0.2s linear' : 'none'"
cx="20"
cy="20"
r="15.8"
stroke="var(--c8y-brand-primary)"
stroke-width="6"
stroke-dasharray="100"
/>
</svg>
<span data-cy="c8y-countdown-interval--seconds">{{ secondsUntilRefresh$ | async }}</span>
</div>
} @else {
<div class="p-relative a-s-stretch no-pointer">
<span
class="c8y-pulse c8y-pulse--md active"
data-cy="global-context--pulse-icon"
></span>
</div>
}