import { CssTime } from '@breadstone/mosaik-themes'; import { TextAlignment } from '../../../Types/TextAlignment'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { INumberCounterElementProps } from './INumberCounterElementProps'; declare const NumberCounterElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Number - The number element is used to display a number. * * @description * TBD * * @element mosaik-number-counter * @category Display * * @csspart counter - The counter part. * * @cssprop {String} --number-counter-font-family - The counter font family CSS custom property. * @cssprop {String} --number-counter-font-letter-spacing - The counter font letter spacing CSS custom property. * @cssprop {String} --number-counter-font-line-height - The counter font line height CSS custom property. * @cssprop {String} --number-counter-font-size - The counter font size CSS custom property. * @cssprop {String} --number-counter-font-text-decoration - The counter font text decoration CSS custom property. * @cssprop {String} --number-counter-font-text-transform - The counter font text transform CSS custom property. * @cssprop {String} --number-counter-font-weight - The counter font weight CSS custom property. * @cssprop {String} --number-counter-gap - The counter gap CSS custom property. * @cssprop {String} --number-counter-padding-bottom - The counter padding bottom CSS custom property. * @cssprop {String} --number-counter-padding-left - The counter padding left CSS custom property. * @cssprop {String} --number-counter-padding-right - The counter padding right CSS custom property. * @cssprop {String} --number-counter-padding-top - The counter padding top CSS custom property. * @cssprop {String} --number-counter-shadow - The counter shadow CSS custom property. * @cssprop {String} --number-counter-shadow-blur - The counter shadow blur CSS custom property. * @cssprop {String} --number-counter-shadow-color - The counter shadow color CSS custom property. * @cssprop {String} --number-counter-shadow-offset-x - The counter shadow offset x CSS custom property. * @cssprop {String} --number-counter-shadow-offset-y - The counter shadow offset y CSS custom property. * @cssprop {String} --number-counter-shadow-spread - The counter shadow spread CSS custom property. * @cssprop {String} --number-counter-transition-duration - The counter transition duration CSS custom property. * @cssprop {String} --number-counter-transition-mode - The counter transition mode CSS custom property. * @cssprop {String} --number-counter-transition-property - The counter transition property CSS custom property. * @cssprop {String} --number-counter-translate - The counter translate CSS custom property. * * @example * ```html * * * ``` * * @public */ export declare class NumberCounterElement extends NumberCounterElement_base implements INumberCounterElementProps { private static _propertyRegistered; private _from; private _to; private _duration; private _readonly; private _alignment; private _animationFrameId; /** * Constructs a new instance of the `NumberCounterElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `from` property. * * @public * @attr */ get from(): number; set from(value: number); /** * Gets or sets the `to` property. * * @public * @attr */ get to(): number; set to(value: number); /** * Gets or sets the `duration` property. * * @public * @attr */ get duration(): CssTime; set duration(value: CssTime); /** * Gets or sets the `readonly` property. * * @public * @attr */ get readonly(): boolean; set readonly(value: boolean); /** * Gets or sets the `alignment` property. * * Possible values are: * * `center` * * `justify` * * `left` * * `right` * * @public * @attr */ get alignment(): TextAlignment; set alignment(value: TextAlignment); /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected */ protected onFromPropertyChanged(_prev?: number, next?: number): void; /** * @protected */ protected onToPropertyChanged(_prev?: number, next?: number): void; /** * @protected */ protected onDurationPropertyChanged(_prev?: CssTime, next?: CssTime): void; /** * Registers the `--n` CSS custom property as `` so the * browser can interpolate it inside `@keyframes counter`. * * @private * @static */ private static registerAnimationProperty; /** * Restarts the CSS counter animation for themes that use the * CSS counter mechanism (base, Memphis, Cosmopolitan). * * @private */ private restartCssAnimation; /** * Starts a requestAnimationFrame-based digit animation that * interpolates from `from` to `to` and updates individual digit * spans, giving each changed digit its own elastic snap. * * @private */ private startDigitAnimation; /** * Creates or updates individual digit `` elements inside * the counter part. Changed digits receive a bounce animation class. * * @private */ private updateDigits; /** * Parses a CSS time value (e.g. '1s', '500ms') to milliseconds. * * @private */ private parseDuration; } /** * @public */ export declare namespace NumberCounterElement { type Props = INumberCounterElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-number-counter': NumberCounterElement; } } export {}; //# sourceMappingURL=NumberCounterElement.d.ts.map