diff --git a/cypress/integration/params/customClass.spec.js b/cypress/integration/params/customClass.spec.js index 136b08824..ae5b36615 100644 --- a/cypress/integration/params/customClass.spec.js +++ b/cypress/integration/params/customClass.spec.js @@ -11,6 +11,8 @@ describe('customClass', () => { icon: 'question', input: 'text', imageUrl: '/assets/swal2-logo.png', + timer: 10000, + timerProgressBar: true, customClass: { container: 'container-class', popup: 'popup-class', @@ -26,6 +28,7 @@ describe('customClass', () => { cancelButton: 'cancel-button-class', loader: 'loader-class', footer: 'footer-class', + timerProgressBar: 'timer-progress-bar-class', }, }) expect(Swal.getContainer().classList.contains('container-class')).to.be.true @@ -42,6 +45,7 @@ describe('customClass', () => { expect(Swal.getCancelButton().classList.contains('cancel-button-class')).to.be.true expect(Swal.getLoader().classList.contains('loader-class')).to.be.true expect(Swal.getFooter().classList.contains('footer-class')).to.be.true + expect(Swal.getTimerProgressBar().classList.contains('timer-progress-bar-class')).to.be.true }) it('only visible input has custom class', () => { diff --git a/src/SweetAlert.js b/src/SweetAlert.js index 48cf04c8f..68437286a 100644 --- a/src/SweetAlert.js +++ b/src/SweetAlert.js @@ -161,6 +161,7 @@ const setupTimer = (globalState, innerParams, dismissWith) => { }, innerParams.timer) if (innerParams.timerProgressBar) { dom.show(timerProgressBar) + dom.applyCustomClass(timerProgressBar, innerParams, 'timerProgressBar') setTimeout(() => { if (globalState.timeout && globalState.timeout.running) { // timer can be already stopped or unset at this point diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 5a5fa7313..cce341291 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -10,9 +10,9 @@ left: 0; box-sizing: border-box; grid-template-areas: - "top-start top top-end" - "center-start center center-end" - "bottom-start bottom-center bottom-end"; + 'top-start top top-end' + 'center-start center center-end' + 'bottom-start bottom-center bottom-end'; grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto); height: 100%; // Safari padding: $swal2-container-padding; @@ -177,7 +177,7 @@ &:not(.swal2-loading) { .swal2-styled { &[disabled] { - opacity: .4; + opacity: 0.4; } &:hover { @@ -288,7 +288,6 @@ bottom: 0; left: 0; grid-column: auto !important; - height: $swal2-timer-progress-bar-height; overflow: hidden; border-bottom-right-radius: $swal2-border-radius; border-bottom-left-radius: $swal2-border-radius; @@ -443,7 +442,7 @@ .swal2-select { min-width: 50%; max-width: 100%; - padding: .375em .625em; + padding: 0.375em 0.625em; background: $swal2-input-background; color: $swal2-input-color; font-size: $swal2-input-font-size; @@ -457,13 +456,13 @@ color: $swal2-input-color; label { - margin: 0 .6em; + margin: 0 0.6em; font-size: $swal2-input-font-size; } input { flex-shrink: 0; - margin: 0 .4em; + margin: 0 0.4em; } } @@ -490,7 +489,7 @@ width: 1.5em; min-width: 1.5em; height: 1.5em; - margin: 0 .625em; + margin: 0 0.625em; zoom: $swal2-validation-message-icon-zoom; border-radius: 50%; background-color: $swal2-validation-message-icon-background; @@ -515,7 +514,7 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); height: $swal2-icon-size; margin: $swal2-icon-margin; zoom: $swal2-icon-zoom; - border: #{.25em * $icon-zoom} solid transparent; + border: #{0.25em * $icon-zoom} solid transparent; border-radius: 50%; border-color: $swal2-icon-border-color; font-family: $swal2-icon-font-family; @@ -547,8 +546,8 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); position: absolute; top: 2.3125em; width: 2.9375em; - height: .3125em; - border-radius: .125em; + height: 0.3125em; + border-radius: 0.125em; background-color: $swal2-error; &[class$='left'] { @@ -565,10 +564,10 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Error icon animation &.swal2-icon-show { @if $swal2-icon-animations { - animation: swal2-animate-error-icon .5s; + animation: swal2-animate-error-icon 0.5s; .swal2-x-mark { - animation: swal2-animate-error-x-mark .5s; + animation: swal2-animate-error-x-mark 0.5s; } } } @@ -581,10 +580,10 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Warning icon animation &.swal2-icon-show { @if $swal2-icon-animations { - animation: swal2-animate-error-icon .5s; + animation: swal2-animate-error-icon 0.5s; .swal2-icon-content { - animation: swal2-animate-i-mark .5s; + animation: swal2-animate-i-mark 0.5s; } } } @@ -597,10 +596,10 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Info icon animation &.swal2-icon-show { @if $swal2-icon-animations { - animation: swal2-animate-error-icon .5s; + animation: swal2-animate-error-icon 0.5s; .swal2-icon-content { - animation: swal2-animate-i-mark .8s; + animation: swal2-animate-i-mark 0.8s; } } } @@ -613,10 +612,10 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Question icon animation &.swal2-icon-show { @if $swal2-icon-animations { - animation: swal2-animate-error-icon .5s; + animation: swal2-animate-error-icon 0.5s; .swal2-icon-content { - animation: swal2-animate-question-mark .8s; + animation: swal2-animate-question-mark 0.8s; } } } @@ -635,7 +634,7 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); border-radius: 50%; &[class$='left'] { - top: -.4375em; + top: -0.4375em; left: -2.0635em; transform: rotate(-45deg); transform-origin: 3.75em 3.75em; @@ -647,7 +646,7 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); } &[class$='right'] { - top: -.6875em; + top: -0.6875em; left: 1.875em; transform: rotate(-45deg); transform-origin: 0 3.75em; @@ -663,12 +662,12 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Ring position: absolute; z-index: 2; - top: -.25em; - left: -.25em; + top: -0.25em; + left: -0.25em; box-sizing: content-box; width: 100%; height: 100%; - border: .25em solid $swal2-success-border; + border: 0.25em solid $swal2-success-border; border-radius: 50%; @if $icon-zoom != 1 { @@ -680,9 +679,9 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); // Hide corners left from animation position: absolute; z-index: 1; - top: .5em; + top: 0.5em; left: 1.625em; - width: .4375em; + width: 0.4375em; height: 5.625em; transform: rotate(-45deg); @@ -695,20 +694,20 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); display: block; position: absolute; z-index: 2; - height: .3125em; - border-radius: .125em; + height: 0.3125em; + border-radius: 0.125em; background-color: $swal2-success; &[class$='tip'] { top: 2.875em; - left: .8125em; + left: 0.8125em; width: 1.5625em; transform: rotate(45deg); } &[class$='long'] { top: 2.375em; - right: .5em; + right: 0.5em; width: 2.9375em; transform: rotate(-45deg); } @@ -722,11 +721,11 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); &.swal2-icon-show { @if $swal2-icon-animations { .swal2-success-line-tip { - animation: swal2-animate-success-line-tip .75s; + animation: swal2-animate-success-line-tip 0.75s; } .swal2-success-line-long { - animation: swal2-animate-success-line-long .75s; + animation: swal2-animate-success-line-long 0.75s; } .swal2-success-circular-line-right { @@ -780,7 +779,7 @@ $icon-zoom: math.div(strip-units($swal2-icon-size), 5); z-index: 10; flex-shrink: 0; width: $swal2-progress-steps-distance; - height: .4em; + height: 0.4em; margin: 0 -1px; background: $swal2-active-step-background; } diff --git a/sweetalert2.d.ts b/sweetalert2.d.ts index 1e4d038a7..42c4ae973 100644 --- a/sweetalert2.d.ts +++ b/sweetalert2.d.ts @@ -12,7 +12,6 @@ declare module 'sweetalert2' { * ``` */ namespace Swal { - /** * Function to display a SweetAlert2 popup, with an object of options, all being optional. * See the `SweetAlertOptions` interface for the list of accepted fields and values. @@ -26,7 +25,7 @@ declare module 'sweetalert2' { * }) * ``` */ - function fire(options: SweetAlertOptions): Promise>>; + function fire(options: SweetAlertOptions): Promise>> /** * Function to display a simple SweetAlert2 popup. @@ -36,7 +35,7 @@ declare module 'sweetalert2' { * Swal.fire('The Internet?', 'That thing is still around?', 'question'); * ``` */ - function fire(title?: string, html?: string, icon?: SweetAlertIcon): Promise>>; + function fire(title?: string, html?: string, icon?: SweetAlertIcon): Promise>> /** * Reuse configuration by creating a `Swal` instance. @@ -54,12 +53,12 @@ declare module 'sweetalert2' { * * @param options the default options to set for this instance. */ - function mixin(options: SweetAlertOptions): typeof Swal; + function mixin(options: SweetAlertOptions): typeof Swal /** * Determines if a popup is shown. */ - function isVisible(): boolean; + function isVisible(): boolean /** * Updates popup options. @@ -72,7 +71,7 @@ declare module 'sweetalert2' { * }) * ``` */ - function update(options: Pick): void; + function update(options: Pick): void /** * Closes the currently open SweetAlert2 popup programmatically. @@ -80,92 +79,92 @@ declare module 'sweetalert2' { * @param result The promise originally returned by `Swal.fire()` will be resolved with this value. * If no object is given, the promise is resolved with an empty `SweetAlertResult` object. */ - function close(result?: SweetAlertResult): void; + function close(result?: SweetAlertResult): void /** * Gets the popup container which contains the backdrop and the popup itself. */ - function getContainer(): HTMLElement | null; + function getContainer(): HTMLElement | null /** * Gets the popup. */ - function getPopup(): HTMLElement | null; + function getPopup(): HTMLElement | null /** * Gets the popup title. */ - function getTitle(): HTMLElement | null; + function getTitle(): HTMLElement | null /** * Gets progress steps. */ - function getProgressSteps(): HTMLElement | null; + function getProgressSteps(): HTMLElement | null /** * Gets the DOM element where the `html`/`text` parameter is rendered to. */ - function getHtmlContainer(): HTMLElement | null; + function getHtmlContainer(): HTMLElement | null /** * Gets the image. */ - function getImage(): HTMLElement | null; + function getImage(): HTMLElement | null /** * Gets the close button. */ - function getCloseButton(): HTMLButtonElement | null; + function getCloseButton(): HTMLButtonElement | null /** * Gets the icon. */ - function getIcon(): HTMLElement | null; + function getIcon(): HTMLElement | null /** * Gets the "Confirm" button. */ - function getConfirmButton(): HTMLButtonElement | null; + function getConfirmButton(): HTMLButtonElement | null /** * Gets the "Deny" button. */ - function getDenyButton(): HTMLButtonElement | null; + function getDenyButton(): HTMLButtonElement | null /** * Gets the "Cancel" button. */ - function getCancelButton(): HTMLButtonElement | null; + function getCancelButton(): HTMLButtonElement | null /** * Gets actions (buttons) wrapper. */ - function getActions(): HTMLElement | null; + function getActions(): HTMLElement | null /** * Gets the popup footer. */ - function getFooter(): HTMLElement | null; + function getFooter(): HTMLElement | null /** * Gets the timer progress bar (see the `timerProgressBar` param). */ - function getTimerProgressBar(): HTMLElement | null; + function getTimerProgressBar(): HTMLElement | null /** * Gets all focusable elements in the popup. */ - function getFocusableElements(): readonly HTMLElement[]; + function getFocusableElements(): readonly HTMLElement[] /** * Enables "Confirm" and "Cancel" buttons. */ - function enableButtons(): void; + function enableButtons(): void /** * Disables "Confirm" and "Cancel" buttons. */ - function disableButtons(): void; + function disableButtons(): void /** * Shows loader (spinner), this is useful with AJAX requests. @@ -176,95 +175,95 @@ declare module 'sweetalert2' { * Swal.showLoading(Swal.getDenyButton()) * ``` */ - function showLoading(buttonToReplace?: HTMLButtonElement): void; + function showLoading(buttonToReplace?: HTMLButtonElement): void /** * Hides loader and shows back the button which was hidden by .showLoading() */ - function hideLoading(): void; + function hideLoading(): void /** * Determines if popup is in the loading state. */ - function isLoading(): boolean; + function isLoading(): boolean /** * Clicks the "Confirm" button programmatically. */ - function clickConfirm(): void; + function clickConfirm(): void /** * Clicks the "Deny" button programmatically. */ - function clickDeny(): void; + function clickDeny(): void /** * Clicks the "Cancel" button programmatically. */ - function clickCancel(): void; + function clickCancel(): void /** * Shows a validation message. * * @param validationMessage The validation message. */ - function showValidationMessage(validationMessage: string): void; + function showValidationMessage(validationMessage: string): void /** * Hides validation message. */ - function resetValidationMessage(): void; + function resetValidationMessage(): void /** * Gets the input DOM node, this method works with input parameter. */ - function getInput(): HTMLInputElement | null; + function getInput(): HTMLInputElement | null /** * Disables the popup input. A disabled input element is unusable and un-clickable. */ - function disableInput(): void; + function disableInput(): void /** * Enables the popup input. */ - function enableInput(): void; + function enableInput(): void /** * Gets the validation message container. */ - function getValidationMessage(): HTMLElement | null; + function getValidationMessage(): HTMLElement | null /** * If `timer` parameter is set, returns number of milliseconds of timer remained. * Otherwise, returns undefined. */ - function getTimerLeft(): number | undefined; + function getTimerLeft(): number | undefined /** * Stop timer. Returns number of milliseconds of timer remained. * If `timer` parameter isn't set, returns `undefined`. */ - function stopTimer(): number | undefined; + function stopTimer(): number | undefined /** * Resume timer. Returns number of milliseconds of timer remained. * If `timer` parameter isn't set, returns `undefined`. */ - function resumeTimer(): number | undefined; + function resumeTimer(): number | undefined /** * Toggle timer. Returns number of milliseconds of timer remained. * If `timer` parameter isn't set, returns `undefined`. */ - function toggleTimer(): number | undefined; + function toggleTimer(): number | undefined /** * Check if timer is running. Returns true if timer is running, * and false is timer is paused / stopped. * If `timer` parameter isn't set, returns `undefined`. */ - function isTimerRunning(): boolean | undefined; + function isTimerRunning(): boolean | undefined /** * Increase timer. Returns number of milliseconds of an updated timer. @@ -272,21 +271,21 @@ declare module 'sweetalert2' { * * @param n The number of milliseconds to add to the currect timer */ - function increaseTimer(n: number): number | undefined; + function increaseTimer(n: number): number | undefined /** * Determines if a given parameter name is valid. * * @param paramName The parameter to check */ - function isValidParameter(paramName: string): paramName is keyof SweetAlertOptions; + function isValidParameter(paramName: string): paramName is keyof SweetAlertOptions /** * Determines if a given parameter name is valid for `Swal.update()` method. * * @param paramName The parameter to check */ - function isUpdatableParameter(paramName: string): paramName is SweetAlertUpdatableParameters; + function isUpdatableParameter(paramName: string): paramName is SweetAlertUpdatableParameters /** * Normalizes the arguments you can give to Swal.fire() in an object of type SweetAlertOptions. @@ -299,13 +298,17 @@ declare module 'sweetalert2' { * * @param params The array of arguments to normalize. */ - function argsToParams(params: SweetAlertArrayOptions | readonly [SweetAlertOptions]): SweetAlertOptions; + function argsToParams(params: SweetAlertArrayOptions | readonly [SweetAlertOptions]): SweetAlertOptions /** * An enum of possible reasons that can explain an alert dismissal. */ enum DismissReason { - cancel, backdrop, close, esc, timer + cancel, + backdrop, + close, + esc, + timer, } /** @@ -315,35 +318,57 @@ declare module 'sweetalert2' { } interface SweetAlertHideShowClass { - backdrop?: string | readonly string[]; - icon?: string | readonly string[]; - popup?: string | readonly string[]; + backdrop?: string | readonly string[] + icon?: string | readonly string[] + popup?: string | readonly string[] } - type Awaited = T extends Promise ? U : T; + type Awaited = T extends Promise ? U : T - type SyncOrAsync = T | Promise | { toPromise: () => T }; + type SyncOrAsync = T | Promise | { toPromise: () => T } - type ValueOrThunk = T | (() => T); + type ValueOrThunk = T | (() => T) - export type SweetAlertArrayOptions = readonly [string?, string?, SweetAlertIcon?]; + export type SweetAlertArrayOptions = readonly [string?, string?, SweetAlertIcon?] - export type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false; + export type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false - export type SweetAlertHideClass = SweetAlertHideShowClass; + export type SweetAlertHideClass = SweetAlertHideShowClass - export type SweetAlertShowClass = Readonly; + export type SweetAlertShowClass = Readonly - export type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question'; + export type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question' export type SweetAlertInput = - 'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' | - 'file' | 'url'; + | 'text' + | 'email' + | 'password' + | 'number' + | 'tel' + | 'range' + | 'textarea' + | 'select' + | 'radio' + | 'checkbox' + | 'file' + | 'url' export type SweetAlertPosition = - 'top' | 'top-start' | 'top-end' | 'top-left' | 'top-right' | - 'center' | 'center-start' | 'center-end' | 'center-left' | 'center-right' | - 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-left' | 'bottom-right'; + | 'top' + | 'top-start' + | 'top-end' + | 'top-left' + | 'top-right' + | 'center' + | 'center-start' + | 'center-end' + | 'center-left' + | 'center-right' + | 'bottom' + | 'bottom-start' + | 'bottom-end' + | 'bottom-left' + | 'bottom-right' export type SweetAlertUpdatableParameters = | 'allowEscapeKey' @@ -385,32 +410,33 @@ declare module 'sweetalert2' { | 'text' | 'title' | 'titleText' - | 'willClose'; + | 'willClose' export interface SweetAlertCustomClass { - container?: string | readonly string[]; - popup?: string | readonly string[]; - title?: string | readonly string[]; - closeButton?: string | readonly string[]; - icon?: string | readonly string[]; - image?: string | readonly string[]; - htmlContainer?: string | readonly string[]; - input?: string | readonly string[]; - validationMessage?: string | readonly string[]; - actions?: string | readonly string[]; - confirmButton?: string | readonly string[]; - denyButton?: string | readonly string[]; - cancelButton?: string | readonly string[]; - loader?: string | readonly string[]; - footer?: string | readonly string[]; + container?: string | readonly string[] + popup?: string | readonly string[] + title?: string | readonly string[] + closeButton?: string | readonly string[] + icon?: string | readonly string[] + image?: string | readonly string[] + htmlContainer?: string | readonly string[] + input?: string | readonly string[] + validationMessage?: string | readonly string[] + actions?: string | readonly string[] + confirmButton?: string | readonly string[] + denyButton?: string | readonly string[] + cancelButton?: string | readonly string[] + loader?: string | readonly string[] + footer?: string | readonly string[] + timerProgressBar?: string | readonly string[] } export interface SweetAlertResult { - readonly isConfirmed: boolean; - readonly isDenied: boolean; - readonly isDismissed: boolean; - readonly value?: T; - readonly dismiss?: Swal.DismissReason; + readonly isConfirmed: boolean + readonly isDenied: boolean + readonly isDismissed: boolean + readonly value?: T + readonly dismiss?: Swal.DismissReason } export interface SweetAlertOptions { @@ -420,14 +446,14 @@ declare module 'sweetalert2' { * * @default '' */ - title?: string | HTMLElement | JQuery; + title?: string | HTMLElement | JQuery /** * The title of the popup, as text. Useful to avoid HTML injection. * * @default '' */ - titleText?: string; + titleText?: string /** * A description for the popup. @@ -435,7 +461,7 @@ declare module 'sweetalert2' { * * @default '' */ - text?: string; + text?: string /** * A HTML description for the popup. @@ -446,7 +472,7 @@ declare module 'sweetalert2' { * * @default '' */ - html?: string | HTMLElement | JQuery; + html?: string | HTMLElement | JQuery /** * The icon of the popup. @@ -456,14 +482,14 @@ declare module 'sweetalert2' { * * @default undefined */ - icon?: SweetAlertIcon; + icon?: SweetAlertIcon /** * Use this to change the color of the icon. * * @default undefined */ - iconColor?: string; + iconColor?: string /** * The custom HTML content for an icon. @@ -478,14 +504,14 @@ declare module 'sweetalert2' { * * @default undefined */ - iconHtml?: string; + iconHtml?: string /** * The footer of the popup, as HTML. * * @default '' */ - footer?: string | HTMLElement | JQuery; + footer?: string | HTMLElement | JQuery /** * The declarative