@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
65 lines (61 loc) • 12 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { timer, tap, takeWhile, map } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslatePipe } from '@ngx-translate/core';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
class CountdownComponent {
type = input('simple-1');
dueDate = input('');
format = input('DD/MM/YYYY HH:mm:ss');
showDays = input(true);
showHours = input(true);
showMinutes = input(true);
showSeconds = input(true);
finished = output();
countdownDateOnMilliseconds = computed(() => {
return dayjs(this.dueDate(), this.format()).toDate().getTime();
});
countdowntimer$ = timer(0, 1000).pipe(tap(() => {
if (dayjs().toDate().getTime() > this.countdownDateOnMilliseconds()) {
this.finished.emit();
}
}), takeWhile(() => dayjs().toDate().getTime() < this.countdownDateOnMilliseconds()), map(() => {
const now = dayjs().toDate().getTime();
const distance = this.countdownDateOnMilliseconds() - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
}));
signalTimer = toSignal(this.countdowntimer$);
days = computed(() => {
return this.signalTimer()?.days;
});
hours = computed(() => {
return this.signalTimer()?.hours;
});
minutes = computed(() => {
return this.signalTimer()?.minutes;
});
seconds = computed(() => {
return this.signalTimer()?.seconds;
});
getfirstLetterOfLabel(label) {
return label.charAt(0).toLocaleLowerCase().trim();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CountdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CountdownComponent, isStandalone: true, selector: "st-countdown", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dueDate: { classPropertyName: "dueDate", publicName: "dueDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showDays: { classPropertyName: "showDays", publicName: "showDays", isSignal: true, isRequired: false, transformFunction: null }, showHours: { classPropertyName: "showHours", publicName: "showHours", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished" }, ngImport: i0, template: "@let shouldShowDays = showDays();\n@let shouldShowHours = showHours();\n@let shouldShowMinutes = showMinutes();\n@let shouldShowSeconds = showSeconds();\n\n@switch (type()) {\n\t<!-- 01:23:59:59 -->\n\t@case ('simple-1') {\n\t\t<span class=\"countdown font-mono text-2xl text-base-content\">\n\t\t\t@if (shouldShowDays && shouldShowHours && shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowHours && shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<!-- 01d23h59m59s -->\n\t@case ('simple-2') {\n\t\t<span class=\"countdown font-mono text-2xl text-base-content\">\n\t\t\t@if (shouldShowDays) {\n\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.days' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowHours) {\n\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.hours' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowMinutes) {\n\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.minutes' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.seconds' | translate) }}\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<!-- 01 days 23 hours 59 min 59 sec -->\n\t@case ('extended-1') {\n\t\t<div class=\"flex gap-5 text-base-content\">\n\t\t\t@if (shouldShowDays) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.days' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowHours) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.hours' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowMinutes) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.minutes' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowSeconds) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.seconds' | translate }}\n\t\t\t</div>\n\t\t</div>\n\t}\n\n\t<!-- 01 23 59 59 -->\n\t<!-- days hours min sec -->\n\t@case ('extended-2') {\n\t\t<div class=\"grid auto-cols-max grid-flow-col gap-5 text-center text-base-content\">\n\t\t\t@if (shouldShowDays) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.days' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowHours) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.hours' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowMinutes) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.minutes' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowSeconds) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.seconds' | translate }}\n\t\t\t</div>\n\t\t</div>\n\t}\n}\n", dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CountdownComponent, decorators: [{
type: Component,
args: [{ selector: 'st-countdown', imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let shouldShowDays = showDays();\n@let shouldShowHours = showHours();\n@let shouldShowMinutes = showMinutes();\n@let shouldShowSeconds = showSeconds();\n\n@switch (type()) {\n\t<!-- 01:23:59:59 -->\n\t@case ('simple-1') {\n\t\t<span class=\"countdown font-mono text-2xl text-base-content\">\n\t\t\t@if (shouldShowDays && shouldShowHours && shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowHours && shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowMinutes && shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t:\n\t\t\t}\n\t\t\t@if (shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<!-- 01d23h59m59s -->\n\t@case ('simple-2') {\n\t\t<span class=\"countdown font-mono text-2xl text-base-content\">\n\t\t\t@if (shouldShowDays) {\n\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.days' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowHours) {\n\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.hours' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowMinutes) {\n\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.minutes' | translate) }}\n\t\t\t}\n\t\t\t@if (shouldShowSeconds) {\n\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t{{ getfirstLetterOfLabel('sdk.countdown.seconds' | translate) }}\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<!-- 01 days 23 hours 59 min 59 sec -->\n\t@case ('extended-1') {\n\t\t<div class=\"flex gap-5 text-base-content\">\n\t\t\t@if (shouldShowDays) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.days' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowHours) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.hours' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowMinutes) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.minutes' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowSeconds) {}\n\t\t\t<div>\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.seconds' | translate }}\n\t\t\t</div>\n\t\t</div>\n\t}\n\n\t<!-- 01 23 59 59 -->\n\t<!-- days hours min sec -->\n\t@case ('extended-2') {\n\t\t<div class=\"grid auto-cols-max grid-flow-col gap-5 text-center text-base-content\">\n\t\t\t@if (shouldShowDays) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ days() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.days' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowHours) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ hours() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.hours' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowMinutes) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ minutes() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.minutes' | translate }}\n\t\t\t</div>\n\t\t\t@if (shouldShowSeconds) {}\n\t\t\t<div class=\"flex flex-col\">\n\t\t\t\t<span class=\"countdown font-mono text-2xl\">\n\t\t\t\t\t<span style=\"--value: {{ seconds() }}\"></span>\n\t\t\t\t</span>\n\t\t\t\t{{ 'sdk.countdown.seconds' | translate }}\n\t\t\t</div>\n\t\t</div>\n\t}\n}\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CountdownComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-countdown.mjs.map