import { IEventEmitter } from '@breadstone/mosaik-elements'; import type { IPressedEventDetail } from '../../../events'; import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement'; import type { IPressButtonElementProps } from './IPressButtonElementProps'; declare const PressButtonElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/ContentAlignable").IContentAlignableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Busyable").IBusyableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Iconable").IIconableProps) & typeof ButtonBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Press Button - An interactive button that requires holding for a configurable duration before triggering its action. * * @description * The Press Button is a safety-focused button designed for destructive or high-impact actions * such as deleting resources. Unlike a standard button, it requires the user to press and hold * for a configurable countdown duration before the action fires. While held, a progress bar fills * the button background from left to right, providing visual feedback. If the user releases before * the countdown completes, the action is cancelled and the progress resets. This prevents accidental * triggering of critical operations. * * @name Press Button * @element mosaik-press-button * @category Buttons * * @slot icon - The icon slot for placing an icon inside the button. * @slot label - The label slot for text or labels inside the button. * @slot overlay - The overlay slot (useful for badges or additional visual elements). * * @csspart button - The button part of the Press Button. * @csspart focusRing - The focus ring part of the Press Button. * @csspart icon - The icon part of the Press Button. * @csspart innerStack - The innerStack part. * @csspart label - The label part of the Press Button. * @csspart progressFill - The progress bar fill that animates from left to right during press. * @csspart progressRing - The progress ring part of the Press Button. * @csspart ripple - The ripple effect part of the Press Button. * * @cssprop {Color} --press-button-background-color - The background color of the Press Button. * @cssprop {Color} --press-button-border-color - The border color of the Press Button. * @cssprop {String} --press-button-border-radius - The border radius of the Press Button. * @cssprop {String} --press-button-border-style - The border style of the Press Button. * @cssprop {String} --press-button-border-width - The border width of the Press Button. * @cssprop {String} --press-button-focus-ring-active-width - The button focus ring active width CSS custom property. * @cssprop {String} --press-button-focus-ring-color - The button focus ring color CSS custom property. * @cssprop {String} --press-button-focus-ring-inward-offset - The button focus ring inward offset CSS custom property. * @cssprop {String} --press-button-focus-ring-outward-offset - The button focus ring outward offset CSS custom property. * @cssprop {String} --press-button-font-family - The font family of the Press Button. * @cssprop {String} --press-button-font-letter-spacing - The font letter spacing of the Press Button. * @cssprop {String} --press-button-font-line-height - The font line height of the Press Button. * @cssprop {String} --press-button-font-size - The font size of the Press Button. * @cssprop {String} --press-button-font-text-decoration - The font text decoration of the Press Button. * @cssprop {String} --press-button-font-text-transform - The font text transform of the Press Button. * @cssprop {String} --press-button-font-weight - The font weight of the Press Button. * @cssprop {Color} --press-button-foreground-color - The foreground color of the Press Button. * @cssprop {String} --press-button-gap - The gap between elements of the Press Button. * @cssprop {String} --press-button-height - The button height CSS custom property. * @cssprop {String} --press-button-icon-min-height - The button icon min height CSS custom property. * @cssprop {String} --press-button-icon-min-width - The button icon min width CSS custom property. * @cssprop {String} --press-button-line-height - The line height of the Press Button text. * @cssprop {String} --press-button-min-height - The button min height CSS custom property. * @cssprop {String} --press-button-min-width - The button min width CSS custom property. * @cssprop {String} --press-button-padding-bottom - The padding bottom of the Press Button. * @cssprop {String} --press-button-padding-left - The padding left of the Press Button. * @cssprop {String} --press-button-padding-right - The padding right of the Press Button. * @cssprop {String} --press-button-padding-top - The padding top of the Press Button. * @cssprop {Color} --press-button-progress-fill-color - The progress fill background color during press. * @cssprop {String} --press-button-progress-ring-width - The button progress ring width CSS custom property. * @cssprop {String} --press-button-progress-thickness - The button progress thickness CSS custom property. * @cssprop {Color} --press-button-ripple-color - The button ripple color CSS custom property. * @cssprop {String} --press-button-ripple-duration - The button ripple duration CSS custom property. * @cssprop {String} --press-button-shadow - The shadow of the Press Button. * @cssprop {String} --press-button-shadow-blur - The button shadow blur CSS custom property. * @cssprop {String} --press-button-shadow-color - The button shadow color CSS custom property. * @cssprop {String} --press-button-shadow-offset-x - The button shadow offset x CSS custom property. * @cssprop {String} --press-button-shadow-offset-y - The button shadow offset y CSS custom property. * @cssprop {String} --press-button-shadow-spread - The button shadow spread CSS custom property. * @cssprop {String} --press-button-transition-duration - The transition duration for the Press Button. * @cssprop {String} --press-button-transition-mode - The transition mode for the Press Button. * @cssprop {String} --press-button-transition-property - The transition property for the Press Button. * @cssprop {String} --press-button-translate - The button translate CSS custom property. * @cssprop {String} --press-button-width - The button width CSS custom property. * * @fires pressed {PressedEvent} - Called when the press duration countdown has completed. * * @dependency {FocusRingElement} mosaik-focus-ring - The Focus Ring component, used for focus indication. * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon. * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for progress indication. * @dependency {RippleElement} mosaik-ripple - The Ripple component, used for the ripple effect. * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management. * @dependency {TextElement} mosaik-text - The Text component, used for displaying the label text. * * @example * Destructive action requiring user confirmation by holding: * ```html * * ``` * * @example * Press button with custom countdown duration for critical infrastructure operations: * ```html * * ``` * * @public */ export declare class PressButtonElement extends PressButtonElement_base implements IPressButtonElementProps { private _duration; private _isPressing; private _isMouseKeydown; private _progress; private _animationFrameId; private _lastTimestamp; private _fillElement; private _pointerDownSubscription; private _pointerUpSubscription; private _pointerCancelSubscription; private readonly _pressed; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `duration` property. * The duration in milliseconds that the button must be held before the `pressed` event fires. * * @public * @attr duration */ get duration(): number; set duration(value: number); /** * Gets or sets the `isPressing` property. * Indicates whether the button is currently being pressed and the countdown is active. * * @public * @readonly * @attr is-pressing */ get isPressing(): boolean; /** * @private */ private set isPressing(value); /** * Called when the press countdown has completed. * Provides reference to `IPressedEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get pressed(): IEventEmitter; /** * @public * @override */ disconnectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * Emits the `pressed` event. * * @protected */ protected onPressed(args: IPressedEventDetail): void; /** * @private */ private onPointerDown; /** * Advances the progress fill on each animation frame while the button is held. * * @private */ private fillTick; /** * Drains the progress fill at 2x speed on each animation frame after the button is released. * * @private */ private drainTick; /** * Called when the progress reaches 100%. Fires the pressed event and fades out the progress fill. * * @private */ private onCompleted; /** * @private */ private release; /** * Cancels any running requestAnimationFrame loop. * * @private */ private cancelAnimation; /** * Updates the progress fill element width to reflect the current progress. * * @private */ private updateFillStyle; /** * Disposes the global pointer event listeners. * * @private */ private releaseListeners; } /** * @public */ export declare namespace PressButtonElement { type Props = IPressButtonElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-press-button': PressButtonElement; } } export {}; //# sourceMappingURL=PressButtonElement.d.ts.map