@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
1 lines • 10.3 kB
Source Map (JSON)
{"version":3,"file":"sixbell-telco-sdk-components-countdown.mjs","sources":["../../../projects/sdk/components/countdown/src/countdown.component.ts","../../../projects/sdk/components/countdown/src/countdown.component.html","../../../projects/sdk/components/countdown/sixbell-telco-sdk-components-countdown.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { map, takeWhile, tap, timer } from 'rxjs';\n\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\n@Component({\n\tselector: 'st-countdown',\n\ttemplateUrl: './countdown.component.html',\n\timports: [TranslatePipe],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CountdownComponent {\n\ttype = input<'simple-1' | 'simple-2' | 'extended-1' | 'extended-2'>('simple-1');\n\tdueDate = input<string>('');\n\tformat = input<string>('DD/MM/YYYY HH:mm:ss');\n\n\tshowDays = input<boolean>(true);\n\tshowHours = input<boolean>(true);\n\tshowMinutes = input<boolean>(true);\n\tshowSeconds = input<boolean>(true);\n\n\tfinished = output<void>();\n\n\tprivate countdownDateOnMilliseconds = computed(() => {\n\t\treturn dayjs(this.dueDate(), this.format()).toDate().getTime();\n\t});\n\n\tcountdowntimer$ = timer(0, 1000).pipe(\n\t\ttap(() => {\n\t\t\tif (dayjs().toDate().getTime() > this.countdownDateOnMilliseconds()) {\n\t\t\t\tthis.finished.emit();\n\t\t\t}\n\t\t}),\n\t\ttakeWhile(() => dayjs().toDate().getTime() < this.countdownDateOnMilliseconds()),\n\t\tmap(() => {\n\t\t\tconst now = dayjs().toDate().getTime();\n\t\t\tconst distance = this.countdownDateOnMilliseconds() - now;\n\t\t\tconst days = Math.floor(distance / (1000 * 60 * 60 * 24));\n\t\t\tconst hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n\t\t\tconst minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n\t\t\tconst seconds = Math.floor((distance % (1000 * 60)) / 1000);\n\n\t\t\treturn { days, hours, minutes, seconds };\n\t\t}),\n\t);\n\n\tsignalTimer = toSignal(this.countdowntimer$);\n\n\tdays = computed(() => {\n\t\treturn this.signalTimer()?.days;\n\t});\n\n\thours = computed(() => {\n\t\treturn this.signalTimer()?.hours;\n\t});\n\n\tminutes = computed(() => {\n\t\treturn this.signalTimer()?.minutes;\n\t});\n\n\tseconds = computed(() => {\n\t\treturn this.signalTimer()?.seconds;\n\t});\n\n\tgetfirstLetterOfLabel(label: string) {\n\t\treturn label.charAt(0).toLocaleLowerCase().trim();\n\t}\n}\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}