@salla.sa/twilight-components
Version:
Salla Web Component
139 lines (138 loc) • 4.65 kB
TypeScript
export declare class SallaCountDown {
constructor();
/**
* The date to count down to.
*
* Supported formats:
*
* Parsed as KSA time (UTC+3):
* - "YYYY-MM-DD HH:mm:ss" (e.g. "2023-05-22 16:37:52")
* - "YYYY-M-D HH:mm:ss" (e.g. "2023-5-22 16:37:52") unpadded month/day accepted
* - "YYYY-MM-DD" (e.g. "2023-05-22") counts down to 23:59:59 of that day
* - "YYYY-M-D" (e.g. "2026-5-15", "2026-05-5") unpadded month/day accepted
* - "MM-DD-YYYY" (e.g. "04-28-2026") counts down to 23:59:59 of that day
* - "MM-DD-YYYY,HH:mm:ss am/pm" (e.g. "12-23-2026,03:23:00 pm")
*
* Parsed as browser local time:
* - "YYYY/MM/DD HH:mm:ss" (e.g. "2023/05/22 16:37:52")
* - "YYYY/MM/DD" (e.g. "2023/05/22") counts down to 23:59:59 of that day
* - "MM/DD/YYYY HH:mm:ss" (e.g. "05/22/2023 16:37:52")
* - "MM/DD/YYYY" (e.g. "05/22/2023") counts down to 23:59:59 of that day
* */
date: string;
/**
* The pre-order date
* Format: { availability_date: string, end_date: string }
* availability_date: The date to count down to Format: MMM DD, YYYY HH:mm:ss (e.g. Jan 2, 2023 16:37:52)
* end_date: The date to count down to Format: MMM DD, YYYY HH:mm:ss (e.g. Jan 2, 2023 16:37:52)
* */
preOrder?: PreOrder | string;
/** If true, applies compact horizontal layout */
horizontal?: boolean;
/** If true, renders a slot for an action button alongside the countdown */
withButton?: boolean;
/**
* The prefix text to show before the countdown
* */
prefixText?: string;
/**
* The button href to show with the countdown
* */
buttonHref?: string;
/**
* The button text to show with the countdown
* */
buttonText?: string;
/**
* The button icon to show with the countdown
* */
buttonIcon?: string;
/**
* If true, the count down numbers will be appear in a boxes
* */
boxed: boolean;
/**
* The size of the count down
* */
size: 'sm' | 'md' | 'lg';
/**
* The color of the count down
* */
color: 'primary' | 'light' | 'dark';
/**
* Show labels for each count down number
* */
labeled: boolean;
/**
* The text to show when the count down ends
* */
endText: string;
/**
* Background color of each box when boxed is enabled.
* Accepts any valid CSS color value (e.g. '#1a3c34', 'var(--color-primary)')
* */
boxColor: string;
/**
* Theme color name to use as the box background when boxed is enabled.
* Maps to the corresponding CSS variable (e.g. 'primary' → var(--color-primary)).
* Available values: 'primary' | 'primary-dark' | 'primary-light' | 'primary-reverse' | 'main'
* Takes precedence over box-color when both are set.
* */
boxTheme: string;
/**
* Horizontal padding applied to the list (e.g. '20px', '1rem', '5%').
* Defaults to no padding.
* */
listPadding: string;
/**
* The digits lang to show in the count down
* */
digits: 'en' | 'auto';
/**
* If true, the count down will end at the end of the day
* */
endOfDay: boolean;
/**
* If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
* Matches salla-timer behaviour. Off by default for backward compatibility.
* */
autoSegments: boolean;
daysLabel: string;
hoursLabel: string;
minutesLabel: string;
secondsLabel: string;
endLabel: string;
invalidDate: string;
offerEnded: boolean;
parseFailed: boolean;
countInterval: any;
days: string;
hours: string;
minutes: string;
seconds: string;
showDays: boolean;
showHours: boolean;
/**
* End the count down
* */
endCountDown(): Promise<void>;
private normalizedPreOrder?;
componentWillLoad(): void;
/**
* Normalize US-style date formats to ISO "YYYY-MM-DD[ HH:mm:ss]".
*/
private normalizeDate;
private isValidDate;
private number;
private startCountDown;
private renderCountDown;
private renderInvalidDate;
private renderOfferEnded;
private renderPreOrderToBeAvailableOn;
private renderPreOrderCountDown;
private renderPreOrder;
private renderPrefixText;
private renderButton;
private renderContent;
render(): any;
}